目前,网页上多数格式都是利用CSS定义,很少使用HTML属性,所以用程序更改CSS属性可以获得更丰富的效果。
利用JavaScript可以修改HTML标签所设置的CSS属性,这样就可以改变标签的样式。
用JavaScript修改标签的样式主要有两种做法:一是用另一个CSS样式表代替标签现在CSS样式表,二是直接修改标签的CSS样式表中的属性。
用JS修改标签的 class 属性值:
class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。
更改一个标签的 class 属性的代码是:
document.getElementById( id ).className = 字符串;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。
利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。
举例:
<style>
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div>欢迎光临!</div>
<p><button>更改样式</button></p>
<script>
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>
效果为:
本例中,按钮用来调用JS函数,在JS函数中,为 <div> 标签设置了class 属性值,把 .txt 样式应用在该标签上。
用JS修改标签的 style 属性值:
style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。DOM 对象也有 style 属性,不过这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一对应的,当改变了 Style 对象的属性时,对应标签的CSS 属性值也就改变了,所以这属于第二种修改方法。
更改一个标签的 CSS 属性的代码是:
document.getElementById( id ).style.属性名 = 值;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。
说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。
注意:多数 Style 对象的属性名和 CSS 属性名是不同名的,且 Style 对象的属性名要区分大小写。
比如:CSS的 font-size 属性对应于 Style 对象的 fontSize 属性,CSS的margin-top 属性对应于 Style 对象的 marginTop 属性。
举例:
<div>欢迎光临!</div>
<p><button>大小</button>
<button>颜色</button>
<button>背景</button>
<button>边框</button>
</p>
<script>
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>
可以看到,虽然一些 Style 对象的属性和 CSS 属性不同名,但取值方法是完全一样的,所以我们可以用这种方法修改一个标签的 CSS 属性值。
附录:Style 对象
Style对象是一个 DOM 对象的子对象,它的每个属性都和CSS的属性相对应。
Style对象的引用方法是:
DOM对象.style.Style属性名
Style 对象的属性和 CSS 属性的区别是:
Style 属性要区分大小写,CSS 属性不区分大小写。
由单个单词命名的 Style 属性和 CSS 属性同名。如:color、border、margin、width、height 等。只有一个特例,CSS 的float 属性对应的 Style 属性是 styleFloat 或 cssFloat。
由多个单词组成的 Style 属性命名方法是:第一个单词小写,其后的单词首字母大写。而 CSS 属性是单词间用“-”分隔。如:font-family 对应于fontFamily,background-image 对应于 backgroundImage,border-top-width 对应于 borderTopWidth。
用JS程序修改页面的风格:
document.body.style.Style属性名 = 值;
document.body 对应的是文档的 <body> 标签,它的风格影响的是整个网页的风格。
如:
<script>
document.body.fontFamily = "宋体";
document.body.fontSize = "16px";
document.body.backgroundImage = "url(./image/bg.gif)";
</script>
用JS程序修改标签的风格:
document.getElementById( id ).style.Style属性名 = 值;
document.getElementById( id ) 用于获取拥有指定 id 的标签,它的风格只影响这一个标签的风格。
如:
<div></div>
<script>
document.getElementById( "mark" ).width = "40%";
document.getElementById( "mark" ).textAlign = "center";
</script>