javascript为DOM元素设置样式
2015-07-20 15:48
756 查看
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style title="core styles">
p{
border:medium double black;
background-color: lightgray;
}
#block1{
color: white;
}
table{
border-collapse: collapse;
border:thin solid black;
margin: 5px;
float: left;
}
td{
padding: 2px;
}
#block4{
color: white;
border:thick solid black;
background-color: gray;
}
</style>
<style media="screen AND (min-width:500px), PRINT" type="text/css">
#block2{
color:yellow;
font-style: italic;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<p id="block1">
远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p id="block2">
远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。。
</p>
<p id="block3" style="color:white;border:thick solid black;background-color: gray">
远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。。
</p>
<p id="block4">
远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p id="block5" style="color:red;border:medium dashed blue;padding: 2px">
远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。。
</p>
<div><button id="pressme">点击禁用样式表</button></div>
<div><button id="pressme1">点击</button></div>
<div><button id="pressme2">点击</button></div>
<div><button id="pressme3">点击</button></div>
<div><button id="pressme4">点击</button></div>
<div id="placeholder"/>
</body>
</html>1）使用样式表
document.stylesheets——返回样式表的集合（CSSStyleSheet[])；
1.1)CSSStyleSheet对象的成员：
cssRules——返回样式表的规则集合（CSS）；
deleteRule(<pos>)——从样式表中移除一条规则；
disabled——获取或设置样式表的禁用状态；
href——返回链接样式表的href;
insertRule(<rule>,<pos>)——插入一条新规则到样式表中；
media——返回应用到样式表上的媒介限制集合（MediaList）；
ownerNode——返回样式所定义的元素；
title——返回title属性的值；
type——返回type属性的值；
<script>
var placeholder=document.getElementById("placeholder");
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,"ownerNode",sheets[i].ownerNode.tagName);
placeholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
}
</script><script>
//禁用样式表
document.getElementById("pressme").onclick=function(){
document.styleSheets[0].disabled=!document.styleSheets[0].disabled;
}
</script>1.1.1）MediaList对象的成员：
appendMedium(<medium>)——添加一个新媒介到列表中；
deleteMedium(<medium>)——从列表中移除一个媒介；
item(<pos>)——返回指定索引的媒介；
length——返回媒介的数量；
mediaText——返回媒介的数量
<script>
var placeholder=document.getElementById("placeholder");
var sheets=document.styleSheets;
//使用MediaList对象
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));
}
}
placeholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
}
</script>1.1.2）CSSRuleList对象的成员：
item(<pos>)——返回指定索引的CSS样式（CSSStyleRule）;
length——返回样式表里的样式数量；
1.1.2.1）CSSStyleRule对象的成员：
cssText——获取或设置样式的文本（包括选择器）；
parentStyleSheet——获取此样式所属的样式表；
selectorText——获取或设置样式的选择器文本；
style——获取一个代表具体样式属性的对象（CSSStyleDeclaration）；
<script>
//使用CSSRuleList和CSSStyleRule对象
var placeholder=document.getElementById("placeholder");
processStyleSheet();
document.getElementById("pressme1").onclick=function(){
document.styleSheets[0].cssRules.item(1).selectorText="#block2";
if(placeholder.hasChildNodes()){
var childCount=placeholder.childNodes.length;
for(var i=0;i<childCount;i++){
placeholder.removeChild(placeholder.firstChild);
}
}
processStyleSheet();
}
function processStyleSheet(){
var rulesList=document.styleSheets[0].cssRules;
for(var i=0;i<rulesList.length;i++){
var rule=rulesList.item(i);
var newElem=document.createElement("table");
newElem.setAttribute("border","1");
addRow(newElem,"parentStyleSheet",rule.parentStyleSheet.title);
addRow(newElem,"selectorText",rule.selectorText);
addRow(newElem,"cssText",rule.cssText);
placeholder.appendChild(newElem);
}
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
}
</script>2）使用元素样式
<script>
//从一个HTMLElement上获取CSSStyleDeclaration对象
var placeholder=document.getElementById("placeholder");
var targetElem=document.getElementById("block3");
displayStyle();
document.getElementById("pressme2").onclick=function(){
targetElem.style.cssText="color:black";
displayStyle();
}
function displayStyle(){
if(placeholder.hasChildNodes()){
placeholder.removeChild(placeholder.firstChild);
}
var newElem=document.createElement("table");
addRow(newElem,"Element CSS",targetElem.style.cssText);
placeholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
}
</script>3）使用CSSStyleDeclaration对象
cssText——获取或设置样式的文本；
getPropertyCSSValue(<name>)——获取指定的属性（CSSPrimitiveValue）；
getPropertyPriority(<name>)——获取指定属性的优先级；
getPropertyValue(<name>)——获取字符串形式的指定值；
item(<pos>)——获取指定位置的项目；
length——获取项目的数量；
parentRule——如果存在样式规则就获取它（CSSStyleRule）;
removeProperty(<name>)——移除指定的属性；
setProperty(<name>,<value>,<priority>)——设置指定属性的值和优先级；
<style>——获取或设置指定CSS属性的便捷属性；
<script>
//使用CSSStyleDeclaration对象的便捷属性
var placeholder=document.getElementById("placeholder");
displayStyles();
document.getElementById("pressme3").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(placeholder.hasChildNodes()){
var childCount=placeholder.childNodes.length;
for(var i=0;i<childCount;i++){
placeholder.removeChild(placeholder.firstChild);
}
}
displayStyleProperties(document.styleSheets[0].cssRules.item(1).style);
displayStyleProperties(document.getElementById("block5").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);
placeholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
}
</script><script>
//使用CSSStyleDeclaration对象的常规属性
var placeholder=document.getElementById("placeholder");
displayStyles();
document.getElementById("pressme4").onclick=function(){
var styleDecla=document.styleSheets[0].cssRules[0].style;
styleDecla.setProperty("background-color","lightgray");
styleDecla.setProperty("padding-top","20px");
styleDecla.setProperty("color","black");
displayStyles();
}
function displayStyles(){
if(placeholder.hasChildNodes()){
var childCount=placeholder.childNodes.length;
for(var i=0;i<childCount;i++){
placeholder.removeChild(placeholder.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-top",style.getPropertyValue("padding-top"));
addRow(newElem,"background-color",style.getPropertyValue("background-color"));
placeholder.appendChild(newElem);
}
function addRow(elem,header,value){
elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"</td></tr>";
}
</script><script>
//以程序方式探索CSS属性
var placeholder = document.getElementById("placeholder");
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]));
}
placeholder.appendChild(newElem);
}
function addRow(elem, header, value) {
elem.innerHTML += "<tr><td>" + header + ":</td><td>"
+ value + "</td></tr>";
}
</script><!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style title="core styles">
p {
color: white;
background-color: gray !important;
padding: 5px !important;
}
table {border: thin solid black; border-collapse: collapse;
margin: 5px; float: left;}
td {padding: 2px;}
</style>
</head>
<body>
<p id="block1">There are lots of different kinds of fruit - there are over
500 varieties of banana alone. By the time we add the countless types of
apples, oranges, and other well-known fruit, we are faced with thousands of
choices.
</p>
<div id="placeholder"></div>
<script>
//获取样式属性的重要性
var placeholder = document.getElementById("placeholder");
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]));
}
placeholder.appendChild(newElem);
}
function addRow(elem, header, value) {
elem.innerHTML += "<tr><td>" + header + ":</td><td>"
+ value + "</td></tr>";
}
</script>
</body>
</html>3.1）使用细粒度的CSS DOM对象
CSSPrimitiveValue对象的成员：
cssText——获得一个用文本表示的值；
getFloatValue(<type>)——获得一个数值；
getRGBColorValue()——获得一个颜色值；
getStringValue()——获得一个字符串值；
primitiveType——获得值的单位类型；
setFloatValue(<type>,<value>)——设置一个数值；
setStringValue(<type>,<value>)——设置一个基于字符串的值；
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style title="core styles">
p {
color: white;
background-color: gray !important;
padding: 7px !important;
}
table {border: thin solid black; border-collapse: collapse;
margin: 5px; float: left;}
td {padding: 2px;}
</style>
</head>
<body>
<p id="block1">There are lots of different kinds of fruit - there are over
500 varieties of banana alone. By the time we add the countless types of
apples, oranges, and other well-known fruit, we are faced with thousands of
choices.
</p>
<div id="placeholder"></div>
<script>
var placeholder = document.getElementById("placeholder");
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)");
}
}
placeholder.appendChild(newElem);
}
function addRow(elem, header, value, units) {
elem.innerHTML += "<tr><td>" + header + ":</td><td>"
+ value + "</td><td>" + units + "</td></tr>";
}
</script>
</body>
</html>4）使用计算样式
document.defalutView.getComputedStyle(<htmlElement>)——获取某个元素的计算样式；
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style title="core styles">
p {
padding: 7px !important;
}
table {border: thin solid black; border-collapse: collapse;
margin: 5px; float: left;}
td {padding: 2px;}
</style>
</head>
<body>
<p id="block1">There are lots of different kinds of fruit - there are over
500 varieties of banana alone. By the time we add the countless types of
apples, oranges, and other well-known fruit, we are faced with thousands of
choices.
</p>
<div id="placeholder"></div>
<script>
var placeholder = document.getElementById("placeholder");
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"));
placeholder.appendChild(newElem);
}
function addRow(elem, header, value) {
elem.innerHTML += "<tr><td>" + header + ":</td><td>"
+ value + "</td></tr>";
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【阅读】《head first html5》第二章——javascript和DOM
- json2.js 的使用
- 使用js函数对select中的option排序后输出
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
- jstring 和string char*之间的转换
- JavaScript学习要点（四）
- maven引入json-lib的正确方法
- 【W3s学JSON】JSON入门概念学习笔记 _W3school
- Angular.js学习笔记
- JS打乱数组最高效的方法
- javascript数组,创建,操作
- JSON-RPC轻量级远程调用协议介绍及使用
- json解析+GridView自适应布局+图片加载
- 点击弹出带有确定和取消选项的提示框
- js进阶
- javascript获取文件后缀名
- javascript 切换按钮改变div颜色
- javascript获取url各种信息
- js 数组Array
- JS 之正则表达式