js控制css样式(js控制css样式不生效) 收藏 0

JavaScript三种动态改变样式属性

JavaScript三种动态改变样式属性

在JavaScript中，有两种方式可以动态地改变样式的属性，一种是使用样式的style属性，另一种是使用样式的className属性。另外，控制元素的显示和隐藏使用display属性。

1.style 属性

设置style属性语法：

HTML元素.style.样式属性=\”值”；

在JavaScript中使用CSS样式与在HTML中使用CSS稍有不同，由于在JavaScript中“-”表示减号，因此如果样式属性名称中带有“-”号，要省去“-”，并且“-”后的首字母要大写。例如，在页面中有一个id为titles的div，要改变div中的字体颜色为红色，字体大小为25px，代码如下所示:

document.getElementById(\”titles\”).style.color=\”#ff0000\”;

document.getElementById(\”titles\”).style.fontsize=\”25px\”;

2.className属性

在HTML DOM中，className属性可设置或返回元素的class样式。

设置 className属性语法：

HTML元素，className=”样式名称”；

将上述示例中div中的字体样式写在样式表中，使用className属性来控制，代码如下所示。

.divStyle{color:#ff0000;font-size:25px;}

document.getElementById(\”titles\”).className=\”divStyle\”;

关于这两种方式的具体使用，请参考《QlavaScript制作页面特效》的相关视频。

3.display属性

display属性控制元素的显示和隐藏，取值有none（隐藏）和block（显示）。

设置 display属性语法：

HTML元素.display=\”值”；

到这里，任务8中的Tab切换效果就可以轻松完成了，自己动手试试吧。

JavaScript DOM修改(文本和样式)

DOM节点获取

操作属性：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

操作内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性和innerText（IE支持） outerText outerHTML

区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

document.getElementById(id).innerHTML=new HTML

实例一

本例改变了 <p> 元素的内容：

实例二：

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

　　1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内外的文本(多个标签)。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，

　　如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，

　　下面是一个简单的符合W3C标准的示例：

操作样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

CSS样式的个别属性采用驮峰式写法(如：backgroundColor), 且不带横线。

document.body.style.backgroundColor=\”red\”;

如：

注意：追加CSS类,注意要留有空格;

ul标记已经设定了.myUL1类的样式的情况下,oMy.className = \”myUL1 myUL2\”不等同于oMy.className += \” myUL2\”,

oMy.className = \”myUL1 myUL2\”表现形式与oMy.className = \”myUL2\”一样; 因此应当采用oMy.className += \” myUl2\”;

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

注意:经过测试证明,para.appendChild(node);调换至最后一行,运行正常

最可行的方法:添加节点的顺序,由内到外(个人习惯);

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com