1、概述
2、使用样式表
通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档关联的各个样式表
每个样式都由一个CSSStyleSheet对象代表,它提供了一组属性和方法来操作文档里样式。
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<br/>
<p id="block2">
大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
</p>
<br/>
<div id="palceholder"></div>
<script type="text/javascript">
var palceholder=document.getElementById("palceholder");
var sheets=document.styleSheets;
for(var i=0;i<sheets.length;i++){
var newElem=document.createElement("table");
newElem.setAttribute("border",1);
addRow(newElem,"index",i);
addRow(newElem,"href",sheets[i].href);
addRow(newElem,"title",sheets[i].title);
addRow(newElem,"type",sheets[i].type);
addRow(newElem,"ownNode",sheets[i].ownerNode.tagName);
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
3、使用媒介限制CSSStyleSheet.Media
可以使用media属性来限制样式应用的场合。可以使用CSSStyleSheet.Media属性访问这些限制,它会返回一个MediaList对象
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<br/>
<p id="block2">
大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
</p>
<br/>
<div id="palceholder"></div>
<script type="text/javascript">
var palceholder=document.getElementById("palceholder");
var sheets=document.styleSheets;
for(var i=0;i<sheets.length;i++){
if(sheets[i].media.length>0){
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
addRow(newElem,"Media Count",sheets[i].media.length);
addRow(newElem,"Media Text",sheets[i].media.mediaText);
for(var j=0;j<sheets[i].media.length;j++){
addRow(newElem,"Media"+j,sheets[i].media.item(j))
}
palceholder.appendChild(newElem);
}
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
4、禁用样式表CSSStyleSheet.disabled
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<br/>
<p id="block2">
大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var pressme=document.getElementById("pressme");
var sheets=document.styleSheets;
pressme.onclick=function(){
sheets[0].disabled=!document.styleSheets[0].disabled;
}
</script>
</body>
5、CSSRuleList对象的成员
CSSRuleList.cssRules属性会返回一个CSSRuleList对象代表,它允许你访问样式表里的各种样式。
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond;}
#block1{color: white;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<br/>
<p id="block2">
大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var pressme=document.getElementById("pressme");
var palceholder=document.getElementById("palceholder");
var sheets=document.styleSheets;
pressme.onclick=function(){
document.styleSheets[0].cssRules.item(1).selectorText="#block2"
if(palceholder.hasChildNodes()){
var chilCount=palceholder.childNodes.length;
for(var i=0;i<chilCount;i++){
palceholder.removeChild(palceholder.firstChild);
}
}
processStyleSheet();
}
function processStyleSheet(){
var ruleList=document.styleSheets[0].cssRules;
for(var i=0;i<ruleList.length;i++){
var rule=ruleList.item(i);
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
addRow(newElem,"parentStyleSheet",rule.parentStyleSheet.title);
addRow(newElem,"selectorText",rule.selectorText);
palceholder.appendChild(newElem);
}
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
6、使用元素样式CSSStyleDeclaration.cssText
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond;}
#block1{color: white;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var pressme=document.getElementById("pressme");
var palceholder=document.getElementById("palceholder");
var targetElem=document.getElementById("block1");
displayStyle();
pressme.onclick=function(){
targetElem.style.cssText="color:green";
displayStyle();
}
function displayStyle(){
if(palceholder.hasChildNodes()){
palceholder.removeChild(palceholder.firstChild);
}
var newElem=document.createElement("table");
addRow(newElem,"Element CSS",targetElem.style.cssText);
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
7、使用CSSStyleDeclation对象(便捷属性)
通过CSSStyleDeclation对象完全控制css
操作CSSStyleDeclaration对象最简单的方式是使用便捷属性,分别对应各个Css属性。说白了就是直接改。
便捷属性的一般命名规则是:
- 基本和css同名
- 多单词的属性去掉横线-,然后大写第二个及之后单词的首字母
- css属性和便捷属性都对应着
- 如果没有给css属性设置值,则对应的便捷属性就会返回一个空白字符串“”
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond; }
#block1{color: white; border: 1px solid gray;padding: 15px;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
td{padding:2px}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<p id="block2">
的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var pressme=document.getElementById("pressme");
var palceholder=document.getElementById("palceholder");
displayStyles();
pressme.onclick=function(){
document.styleSheets[0].cssRules.item(1).style.paddingTop="10px";
document.styleSheets[0].cssRules.item(1).style.paddingRight="12px";
document.styleSheets[0].cssRules.item(1).style.paddingLeft="5px";
document.styleSheets[0].cssRules.item(1).style.paddingBottom="5px";
displayStyles();
}
function displayStyles(){
if(palceholder.hasChildNodes()){
var childCount=palceholder.childNodes.length;
for(var i=0;i<childCount;i++){
palceholder.removeChild(palceholder.firstChild);
}
}
displayStyleProperties(document.styleSheets[0].cssRules.item(1).style);
displayStyleProperties(document.getElementById("block2").style);
}
function displayStyleProperties(style){
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
addRow(newElem,"border",style.border);
addRow(newElem,"color",style.color);
addRow(newElem,"padding",style.padding);
addRow(newElem,"paddingTop",style.paddingTop);
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
8、使用常规属性
当程序不知道便捷属性的时候,只能使用常规属性
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond; }
#block1{color: white; border: 1px solid gray;padding: 15px;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
td{padding:2px}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<p id="block2">
的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var pressme=document.getElementById("pressme");
var palceholder=document.getElementById("palceholder");
displayStyles();
pressme.onclick=function(){
var styleDeclar=document.styleSheets[0].cssRules[0].style;
//以下使用的是常规属性
styleDeclar.setProperty("background-color","lightgray");
styleDeclar.setProperty("padding-top","20px");
styleDeclar.setProperty("color","blue");
displayStyles();
}
function displayStyles(){
if(palceholder.hasChildNodes()){
var childCount=palceholder.childNodes.length;
for(var i=0;i<childCount;i++){
palceholder.removeChild(palceholder.firstChild);
}
}
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
var style=document.styleSheets[0].cssRules[0].style;
//获取的也是常规属性
addRow(newElem,"border",style.getPropertyValue("border"));
addRow(newElem,"color",style.getPropertyValue("color"));
addRow(newElem,"padding",style.getPropertyValue("padding-top"));
addRow(newElem,"background-color",style.getPropertyValue("background-color"));
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
9、用程序方式探索属性
枚举样式表第一条样式的所有属性
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<p id="block2">
的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var pressme=document.getElementById("pressme");
var palceholder=document.getElementById("palceholder");
displayStyles();
function displayStyles(){
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
var style=document.styleSheets[0].cssRules[0].style;
for(var i=0;i<style.length;i++){
addRow(newElem,style[i],style.getPropertyValue(style[i]));
}
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
10、getPropertyPriority获知样式属性的重要性(优先级)
getPropertyPriority对高优先级的值会返回important,如果没有指定重要性则会返回一个空白字符串(“”)
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond; }
#block1{color: white; border: 1px solid gray;padding: 15px;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
td{padding:2px}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<p id="block2">
的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var palceholder=document.getElementById("palceholder");
displayStyles();
function displayStyles(){
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
var style=document.styleSheets[0].cssRules[0].style;
for(var i=0;i<style.length;i++){
addRow(newElem,style[i],style.getPropertyPriority(style[i]));
}
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
11、CSSStyleDeclaration.getPropertyCSSValue方法使用细粒度的CSS DOM对象
使用CSSStyleDeclaration.getPropertyCSSValue方法获取CSSPrimitiveValue对象
CSSPrimitiveValue对象的关键在于primitiveType属性,会告诉你属性的值是用什么单位表达的
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond; }
#block1{color: white; border: 1px solid gray;padding: 15px;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
td{padding:2px}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<p id="block2">
的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var palceholder=document.getElementById("palceholder");
displayStyles();
function displayStyles(){
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
var style=document.styleSheets[0].cssRules[0].style;
for(var i=0;i<style.length;i++){
var val=style.getPropertyCSSValue(style[i]);//报错
if(val.primitiveType==CSSPrimitiveValue.CSS_PX){
addRow(newElem,style[i],val.getFloatValue(CSSPrimitiveValue.CSS_PX),"pixels");
addRow(newElem,style[i],val.getFloatValue(CSSPrimitiveValue.CSS_PT),"points");
addRow(newElem,style[i],val.getFloatValue(CSSPrimitiveValue.CSS_IN),"inches");
}else if(val.primitiveType==CSSPrimitiveValue.CSS_RGBCOLOR){
var color=val.getRGBColorValue();
addRow(newElem,style[i],color.red.cssText+" "+color.green.cssText+" "+color.blue.cssText,"color");
}else{
addRow(newElem,style[i],val.cssText,"(other)");
}
}
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>
报错,getPropertyCSSValue报错
12、document.defaultview.getComputedStyle使用计算样式
<head>
<style type="text/css">
p{ border:medium double black;background-color: blanchedalmond; }
#block1{color: white; border: 1px solid gray;padding: 15px;}
#block2{color: red; font-style: italic;}
table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
td{padding:2px}
</style>
</head>
<body>
<p id="block1">
there is some things to do something, By the time add,countleess zhen
</p>
<p id="block2">
的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
</p>
<br/>
<div id="palceholder"></div>
<button id="pressme">pressme</button>
<script type="text/javascript">
var palceholder=document.getElementById("palceholder");
displayStyles();
function displayStyles(){
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
var targetElem=document.getElementById("block1");
var style=document.defaultView.getComputedStyle(targetElem);
addRow(newElem,"Property Count",style.length);
addRow(newElem,"margin-top",style.getPropertyValue("margin-top"));
addRow(newElem,"font-size",style.getPropertyValue("font-size"));
addRow(newElem,"font-family",style.getPropertyValue("font-family"));
palceholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
}
</script>
</body>