发表于: 2018-04-24 11:15:21

1 231


今天完成的事:

1.今天修改了任务

明计划的事:

1.明天继续修改任务

2.然后学习一波新的知识点

遇到的问题:

暂时没有

收获:

目前,网页上多数格式都是利用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 type="text/css">
.txt {
    font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">欢迎光临!</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
    document.getElementById( "tt" ).className = "txt";
}
</script>

效果为:

欢迎光临!

本例中,按钮用来调用JS函数,在JS函数中,为 <div id="tt"> 标签设置了 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 id="t2">欢迎光临!</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>
<script type="text/javascript">
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 type="text/javascript">
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 id="mark"></div>

<script type="text/javascript">
document.getElementById( "mark" ).width = "40%";
document.getElementById( "mark" ).textAlign = "center";
</script>



返回列表 返回列表
评论

    分享到