变动一个标签的 class 属性的代码是:
document.getElementById( id ).className = 字符串;
document.getElementById( id ) 用于获取标签对应的 DOM 工具,你也可以用其它方法获取。className 是 DOM 工具的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它该当是一个已定义的CSS选择符。
利用这种办法可以把标签的CSS样式表更换成其余一个,也可以让一个没有运用CSS样式的标签运用指定的样式。
举例1,代码如下:
.txt {
font-size: 30px; font-weight: bold; color: red; }
</style>
<div id=\"大众tt\"大众>欢迎光临!
</div>
<p><button on click=\公众setClass()\公众>变动样式</button></p>
<script type=\"大众text/javas cript\"大众>
function setClass()
{
document.getElementById( \"大众tt\"大众 ).className = \"大众txt\"大众;
}
</script>
举例2,代码如下:
<script type=\公众text/javascript\公众>
<!--
var h=document.getElementById(\公众tab\"大众).getElementsByTagName(\公众h3\公众);
var d=document.getElementById(\"大众tab\"大众).getElementsByTagName(\"大众div\"大众);
function go_to(ao){
for(var i=0;i<h.length;i++){
if(ao-1==i){
h[i].className+=\"大众 up\公众;
d[i].className+=\"大众 block\公众;
}
else {
h[i].className=\"大众 \"大众;
d[i].className=\公众 \"大众;
}
}
}
//-->
</script>
2 用JS修正标签的 style 属性值:元素的style属性可以直接设置元素的外不雅观属性。Style 工具的属性和 CSS 属性是逐一对应的,可以直接设置,也可以通过JS动态变动。
变动一个标签的 style 属性的代码是:
document.getElementById( id ).style.属性名 = 值;
document.getElementById( id ) 用于获取标签对应的 DOM 工具,你也可以用其它方法获取。style 是 DOM 工具的一个属性,它本身也是一个工具。属性名 是 Style 工具的属性名,它和某个CSS属性是相对应的。
解释:这种方法修正的单一的一个CSS属性,它不影响标签上其它CSS属性值。
举例,代码如下:
div id=\"大众t2\"大众>欢迎光临!
</div>
<p><button on click=\公众setSize()\"大众>大小</button>
<button on click=\"大众setColor()\公众>颜色</button>
<button on click=\"大众setbgColor()\公众>背景</button>
<button on click=\"大众setBd()\公众>边框</button>
</p>
<script type=\公众text/java 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>
3 综合实例function clk(event) {
var parent = document.getElementById(\"大众parent\"大众);
//改变className
var child0 = document.createElement(\公众div\"大众);
child0.innerHTML = \公众child0\公众;
child0.className = \公众newDiv\公众;
parent.appendChild(child0);
//改变cssText
var child1 = document.createElement(\"大众div\"大众);
child1.innerHTML = \"大众child1\"大众;
child1.style.cssText = \"大众color:red;\"大众;
parent.appendChild(child1);
//改变直接样式
var child2 = document.createElement(\"大众div\公众);
child2.innerHTML = \"大众child2\"大众;
child2.style.fontSize = \公众28px\"大众;
parent.appendChild(child2);
}
4 JS设置CSS的语法与CSS语法的差异verticalAlign
从上表可以看出,两者的写法差异在于CSS是不区分大小写的,以是两个英笔墨中间用了一个横杠\"大众-\"大众,用JS区分大小写,以是不用横杠\"大众-\"大众,而用英文的小驼峰式命名法(lower camel case,第一个单字以小写字母开始,第二个单字的首字母大写)。
-End-