读取CSS元素
style
例如,运行div.style,会展示出div能用的所有的能用的css属性
style 是行间样式,只认识写在它行间的值,和getComputedStyle不同,这个是最终显示在文档的值
可读写行间样式,没有兼容问题,碰到Float这样的保留字属性,前面应加css
cssfloat
复合属性必须拆解,组合单词变成小驼峰式写法
写入的值必须是字符串格式
window.getComputedStyle(ele,null);
计算样式只读,除了Style,其他访问CSS的只能读,不能写;
返回的计算样式的值都是绝对值,没有相对单位,例如10em,显示的就是160px、颜色红色red,显示的就是rgb(255,0,0)形式;
IE8及以下不兼容
但IE有自己的操作方式
ele.currentStyle
计算样式只读,
返回的计算值不是经过转换的值,意思是写的10em就是10em.
封装一个方法,解决兼容性问题,很实用:
<script>
function getstyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop]
}else{
return elem.currentStyle[prop];
}
}
//:elem是DOM元素,prop是想获取CSS什么属性
// getComputedStyle(ele,null)里null是放伪元素的,只此一个方法
</script>
另外突发奇想,想用伪元素写一个点击图片变色的程序
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.green::after{
content:"";
width:50px;
height:50px;
background-color: green;
display:inline-block;
}
.yellow::after{
content:"";
width:50px;
height:50px;
background-color: yellow;
display:inline-block;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div class = "green" style="background-color:#000000;width: 100px;height: 100px;opacity: 0.5;">
</div>
<script>
var div = document.getElementsByTagName('div')[0];
var count = 0;
div.onclick = function () {
count ++;
if(count % 2 == 1){
this.className = "yellow";
}else{
this.className = "green";
}
}
</script>