DOM的属性与DOM的样式

标题DOM的属性与DOM的样式

DOM的属性
相同的标签属性：
id style className src title checked type placeholder disable value action method

完全没有相同的标签属性：
rowspan colspan

对于部分属性名，标签属性和对象属性是共通的
style 可以设置两种值，一种是字符串，一种是对象

div.class=“abc”//不能使用class
div.className="abc"等同于在标签中添加了class属性
input.value=“aaa”;//不会出现在标签属性，仅在非文本元素出现
input.checked=false;//这个checked和标签的checked有冲突,有冲突时以对象属性为准

标签属性的存储和获取值分别使用setSttribute，getSttribute
标签属性不能有大小写
标签属性的值都必须是字符型
标签属性是属于暴露值的特征
标签属性设置的目的是为了更加轻松地找到标签
还可以用来存储需要观察的值

设置标签属性
div.setAttribute(属性名,属性值)

标签属性的存储和获取值分别使用setAttribute和getAttribute
标签属性不能有大小写，标签属性值都必须是字符型，标签属性是属于暴露值特征
标签属性设置的目的就是为了更加轻松找到标签，还可以用来存储需要观察的值

删除标签属性
div. removeAttribute(name);

document.body：body元素
document.title：获取、设置文档的标题
document.URL：获得完整的URL

dom自定义的对象属性：除自身拥有的外自己定义的
dom自身有的对象属性：自身带有的

DOM的样式

字符串形态的行内样式，使用分号分隔，样式名称与CSS完全相同
div.style=“width:50px;height:50px;background-color:red”;

对象形态的行内样式，需要一个个定义，要求属性值必须是字符串，如果值是0则可以使用数值，会隐式转换为字符
属性名和CSS不相同，命名标准不同，一个是驼峰式命名，一个是-小写
div.style.width=“50px”;
div.style.height=“50px”;
div.style.backgroundColor=“red”;
div.style.position=“absolute”;
div.style.left=0;
div.style.top=0;

即使使用的是字符串行内样式，也会在设置后被添加在对象样式中

div.style
是CSSStyleDeclaration类型的对象
只能获取行内样式的结果，CSS样式设置的样式结果是不可以获取的

getComputedStyle(div).width
获取计算后（渲染后）样式 谷歌和火狐浏览器，已经IE8以上支持
div.currentStyle.width ie8及以下

使用try方法获取渲染后样式
var style;
try{
style=getComputedStyle(div);
}catch(e){
console.log(e);
style=div.currentStyle
}
console.log(style.width);

console.log(document.styleSheets);//获取当前页面中所有的style标签
console.log(document.styleSheets[0]);//第一个style标签
console.log(document.styleSheets[0].cssRules);//第一个style标签中所有选择器CSS列表
console.log(document.styleSheets[0].cssRules[0]);//第一个style标签中选择器CSS列表第一个选择器CSS
console.log(document.styleSheets[0].cssRules[0].style);//第一个style标签中选择器CSS列表第一个选择器CSS的样式
console.log(document.styleSheets[0].cssRules[0].selectorText);//第一个style标签中选择器CSS列表第一个选择器CSS的名字
document.styleSheets[0].cssRules[0].style.width=“100px”;可以修改样式

var styleSheet=document.styleSheets[0];
styleSheet.insertRule(“选择器 { 样式内容 }”,插入在第几个选择器索引)
styleSheet.insertRule(".div2 {width:100px;height:100px;background-color:blue;}",styleSheet.cssRules.length)//
document.styleSheets[0].addRule();//添加选择器样式早期浏览器不支持
styleSheet.addRule(选择器,“CSS样式”，插入在第几个选择器索引)

添加CSS案例

function addCSS(selector, style, title) {
   // 如果没有设置title参数，默认设置为xietian
   if (title === undefined) title = "xietian";
   // 将当前文档所有的style标签列表转换为数组
   var arr = Array.from(document.styleSheets);
   // 根据归并，判断是否有style的title是我们给入的参数，如果有就这个style标签对应的styleSheet返回
   // 如果没有找到返回null
   var styleSheet = arr.reduce(function (value, item) {
          if (item.title === title) return item;
          return value;
   }, null);
   // 如果没有找到
   if (!styleSheet) {
   // 创建一个style，并且给他设置title为给入的title，放入到head中
   var s = document.createElement("style");
   s.title = title;
   document.head.appendChild(s);
   // 获取文档styleSheets列表的最后一个，最后一个就是新增的内容
   styleSheet = document.styleSheets[document.styleSheets.length - 1];
   }
   var str = "";
   // 新建字符串，并且将对象遍历，把每个样式转换为字符形式累加进入
   for (var prop in style) {
   // 样式名需要将大写字母转换为-小写字母，样式值如果是数值，加上px
     str +=
     prop.replace(/[A-Z]/g, function (value) {
         return "-" + value.toLowerCase();
     }) +":" + (typeof style[prop] === "number"? style[prop] + "px" : style[prop]) +";";
}
     // 判断是否支持方法addRule，如果支持，直接添加
if (styleSheet.addRule) {
          styleSheet.addRule(selector, str, styleSheet.cssRules.length);
   } else {
          styleSheet.insertRule(selector + "{ " + str + " }",styleSheet.cssRules.length);
        }
   }