紧接上文=============gogogo
接着来看如何操作和获取节点的样式
- style属性
- DOM事件与style下的事件绑定
- className属性
1、style
语法：HTML元素.style.样式属性＝"值"
常用属性：
| 类别 | 属性 |
|---|---|
| 背景 | backgroundColor、backgroundImage、backgroundRepeat |
| 文本 | fontSize、fontWeight、textAlign、textDecoration、font、color |
| 边距 | padding、paddingTop 、paddingBottom、paddingLeft、paddingRight |
| 边框 | border、borderTop、borderBottom、borderLeft、borderRight |
代码样式：
document.getElementById(“titles”).style.color="#ff0000";
document.getElementById(“titles”).style.fontSize="25px ";
element.setAttribute(‘style’,’’)
element.style.backgroundColor = ‘red’
element.style.cssText //用来读写或删除整个style属性
element.style.setProperty(propertyName,value) //设置css属性
element.style.getPropertyValue(property) //获取css属性
element.style.removeProperty(property) //删除css属性
操作非内联样式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName]
window.getComputedStyle(el,null).getPropertyValue(attrName)
//伪类
window.getComputedStyle(el,’:after’)[attrName]
直接来看一些代码实例吧：
一、
<script>
function test1(obj){
obj.style.background="yellow";
}
</script>
</head>
<body>
请输入: <input type="text" onfocus="test1(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性）将被触发。</p>
</body>
二、
<body>
<p id="s1">Hello world!</p>
<p id="s1">Hello world!</p>
<script>
document.getElementById("s1").style.color="blue";
document.getElementById("s1").style.fontFamily="Arial";
document.getElementById("s1").style.fontSize="larger";
</script>
</body>
层叠
代码示例：
<body>
<div style="width:100px;height:200px;background-color: yellow;">
</div>
<div style="margin:10px;width:100px;height:200px;background-color: blue; position: absolute; top:10px;z-index: -1">
</div>
</body>
2、 DOM事件与style下的事件绑定
| 名称 | 描述 |
|---|---|
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmousedown | 鼠标按钮被按下 |
| onmouseout | 鼠标从某元素移开 |
| 。。。。。。 | 更多请参考官方文档 |
onchange 事件
代码示例：
<head>
<script>
function test1(){
var x=document.getElementById("s1");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入: <input type="text" id="s1" onchange="test1()">
<p>离开输入框将变成黄色</p>
</body>
鼠标事件：
代码示例:
<body>
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">移到这里来</h1>
</body>
onmouseover 和 onmouseout 事件
代码示例：
<body>
<div onmouseover="test1(this)" onmouseout="test2(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function test1(obj){
obj.innerHTML="谢谢你"
}
function test2(obj){
obj.innerHTML="再见"
}
</script>
</body>
onmousedown、onmouseup 以及 onclick 事件
代码示例：
<body>
<div
onmousedown="test1(this)"
onmouseup="test2(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这
</div>
<script>
function test2(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开"
}
function test1(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>
</body>
onmousedown 和onmouseup事件
代码示例;
<head>
<script>
function test1(){
document.getElementById('demo1').src="bulbon.gif";
}
function test2(){
document.getElementById('demo1').src="bulboff.gif";
}
</script>
</head>
<body>
<img id="demo1" onmousedown="test1()" onmouseup="test2()" src="bulboff.gif" width="100" height="180" />
<p>点击灯泡将点亮</p>
</body>
改变背景颜色示例
<body>
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="点击改变背景色">
</body>
避免篇幅太长接下篇=========gogogo