Javascript 中css 基础知识
- 从样式表中得到指定值(specified value)
- 把一部分相对单位(em、百分比等)计算成绝对长度,把相对 URI 计算为绝对 URI,得到计算值(computed value),计算值就是用来继承给子元素的。有些值(比如 width、top 的百分比,或者一些 auto 值)不能直接计算,要先得到包含块宽度,也就是需要布局完成才能计算的,它们的计算值与指定值相同;
- 这一步把上面没计算的值进行布局计算,得到应用值(used value);
- 有一些属性值在特定环境下可能无法渲染,比如你给 font-size 或 border-width 设置了小数点值 14.2px,浏览器也许只能渲染整数像素 ,那么会对这些值重新估算,得出实际值(actual value)。
<script language="javascript">
function css(node, css){
/*
设置元素的内联样式
var clock = document.getElementById('clock');
css(clock, "color: #ff0000;")
css(clock, { padding: '40px',
"borderLeft":"1px solid #f00"
})
*/
if(typeof css === "string"){
node.style.cssText = css;
}else{
for(var i in css){
console.log(i)
node.style[i] = css[i];
}
}
}
function getCss(node, css){
/*
获得元素的计算样式
.aa{
padding-left:30px;
margin-left:100px;
}
<div id="clock" class="aa">
window.onload = function(){
console.log(document.getElementById('clock').style.marginLeft); //undefined;
}
*/
<span style="white-space:pre"> </span>// http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/ 关于 getComputedStyle
if(window.getComputedStyle){ //IE8 没有getComputedStyle, 并且getComputedStyle返回的是绝对值,如果你设置了width:100%, 返回的值为计算后的值, 而currentStyle 为100%;
return window.getComputedStyle(node)[css]; //CSSStyleDeclaration
}else{
return node.currentStyle[css]; //CSSStyleDeclaration
}
}
/*
脚本化 css 类
1. 每个浏览器都有 className属性,可以用来设置和获得元素上的类名,但每次只能是单个的设置,会把之前的类给覆盖
2. HTML 5 有一个属性,classList, 返回一个DOMTokenList对像, 它实时的代表元素类名的集合, DOMTokenList拥有以下几个方法 contains, add, remove, toggle
*/
function classList(e){
if(e.classList) return e.classList;
else return new CSSClassList(e);
}
function CSSClassList(e){
this.e = e;
}
CSSClassList.prototype.contains = function(c){
//检测c是否是合法的类名
if(c.length === 0 || c.indexOf(' ') != -1){
throw new Error("Invalid class name '" + c + "'");
}
var classes = this.e.className;
if(!classes) return false; // 元类没有设置类
if(classes === c) return true; // 设置了单个类
return classes.search("\\b" + c + "\\b") != -1; // 性能更好的方法 return ((" " + classes + " ").indexOf(" " + c + " ") >= 0)
}
CSSClassList.prototype.add = function(c){
if(this.contains(c)) return; //已经存在,直接返回
var classes = this.e.className;
if(classes && classes[classes.length -1] != " ") //如果类名的最后一个字符串为空格
c = " " + c;
this.e.className += c;
}
CSSClassList.prototype.remove = function(c) {
if(c.length === 0 || c.indexOf(' ') != -1){
throw new Error("Invalid class name '" + c + "'");
}
var pattern = new RegExp("\\b" + c + "\\b\\s*", "g");
this.e.className.replace(pattern, "");
};
//如果c不存在, 添加到className, 并返回true
//如果c存在, 从className中删除, 并返回false
CSSClassList.prototype.toggle = function(c){
if(this.contains(c)){
this.remove(c)
return false;
}else{
this.add(c);
return true;
}
}
require(['dojo/dom', 'dojo/query','dojo/dom-attr', 'dojo/_base/array'], function(dom, query, domAttr, array) {
var clock = dom.byId('clock');
})
window.onload = function() {
var clock = document.getElementById('clock');
css(clock, "color: #ff0000;")
css(clock, { padding: '40px',
"borderLeft":"1px solid #f00"
})
console.log(getCss(clock, 'marginLeft'))
console.log(classList(clock).toggle('ccc'));
}
在dojo中样式设置需要考虑到opacity 和 float, 而计算样式需要考虑浏览器的兼容性,而且在IE上不能仅依靠currentStyle来获取到元素的 如高,宽值, 如高, 宽等,在自己的实践,很少会需要使用到计算样式,只需考虑设置样式.
dojo的样式设置和获取,请查看 https://github.com/robinxiong/dojo/blob/master/dom-style.js https://github.com/robinxiong/dojo/blob/master/dom-class.js