JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JavaScript设置和修改CSS样式

JavaScript可以通过DOM来设置和修改节点的CSS样式。

语法:
    nodeObject.style.cssProperty=newStyle
其中,nodeObject 为节点对象,cssProperty 为CSS属性,newStyle 为CSS属性的值。

注意:对于由 “ - ” 分隔的CSS属性,要去掉 “ - ” ,并将 “ - ” 后的第一个字母大写。

例如:
document.getElementById("demo").style.height = "50px" ;
document.getElementById("demo").style.border = " 1px solid #ddd ";
document.getElementById("demo").style.backgroundColor = " #ccc ";
document.getElementById("demo").style.textAlign = " center ";

举例,设置 id="demo"的节点的样式:
<style>
#demo{
    height:50px;
    width:250px;
    margin-top:10px;
    text-align:center;
    line-height:50px;
    background-color:#ccc;
    }
</style>
<div id="demo">
    点击这里改变CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        this.style.height = " 70px ";
        this.style.lineHeight = " 70px ";
        this.style.backgroundColor = " #000 ";
        this.style.color=" #fff ";
    }
</script>

实例演示:
点击这里改变CSS样式