1、JavaScript设置内联样式
改变样式最直接的方法就是改变元素节点的style属性。如:
myElement.sytle.color = “red”
myElement.sytle.left = “40px”
myElement.sytle.backgroundRepeat = “repeat-x”
JavaScript设置内联样式时,采用和css设置样式一样的风格。如设置myElement的color属性时,我们可以赋值任何在css中可以用的值,所以这里除了可以使用”red”,还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。
另外用JavaScript改变网页的属性还需要注意2点:
l JavaScript中采用驼峰命名法:在css中,属性名中的单词之间是用横杠隔开,如font-weight, background-color。但在JavaScript中,横杠可能被认为是减号,所以采用驼峰命名法,单词之间不用横杠,如font-weight在JavaScript中应该写成fontWeight而background-color写成backgroundColor。
l JavaScript中属性值为字符串:在css中,属性值都写在双引号中,即要用字符串来给css相关属性赋值,同样当属性值有单位时,我们需要将单位也写在字符串中。
2、JavaScript设置外部样式
当你需要改变的样式已经在css文件中定义了,我们也可以用JavaScript直接用定义好的css样式。如下格式:
myElement.className = “someCSSclass”
同样需要注意几点:
l 不要将className写成class,因为class是JavaScript保留的关键字,我们不能使用。
l 将定义在css中的样式直接赋值给className,就能改变myElement元素的样式。
l 当要删除元素的样式,可以给className属性赋值为空。如:
myElement.className = “”
教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容,可以看看,希望对你有帮助。
div代码:
<div id="main">
<div id="right">右边
</div>
<div id="left">左边
</div>
</div>
css代码:
<style type="text/css">
#main {width:100pxbackground:red}
#right {width:60pxfloat:rightbackground:yellow}
#left {width:50pxfloat:leftbackground:gray}
</style>
显示:如图
结论:float先遵守宽度设置
ps:right+left的宽度=110px,main的宽度=100px