标签：tor element 文字 spl log spel OLE rem classname
固有属性（property）
自定义属性（atrributes）
<div id="ml" xx="xx" a="b">
获取div的xx属性值
console.log(div.attributes.getNamedIteam(‘xx‘).nodeValue);
console.log(div.attributes.[‘xx‘].nodeValue);
删除div的xx属性值
div.attributes.removeNamedIteam(‘xx‘);
创建div的yy属性
var attr = document.createAttribute(‘yy‘); attr.value = ‘bbq‘ ; div.attributes.setNamedIteam(attr);
布尔属性
<input type = "checkbox">北京 <input type = "checkbox" checked>上海 <input type ="checkbox">广州
除了用checked选中外，还可以
var inputs = document.qureySelectorAll("input"); inputs[1].checked = 1 ; //只要令该表达式为真就可以被选中
<select name="city" id="city"> <option value="北京"> 北京 </option> <option value="上海" selected> 上海 </option> <option value="广州"> 广州 </option> </select>
除了用selected选中外，还可以
var city = document.getElementById("city"); var options = city.options; options[1].selected = true; //只要令该表达式为真就可以被选中
国籍：<input type="text" value="中国" id="country" readonly>
除了用readonly外，还可以
var country = document.getElementById("country"); country.readOnly = true; //只要令该表达式为真就变成只读
readonly跟disable的区别
readonly可以提交到后端，disable不可以
<select name="city" id="city" multiple> <option value="北京"> 北京 </option> <option value="上海"> 上海 </option> <option value="广州"> 广州 </option> </select>
除了用multiple实现多选外，还可以
var city = document.getElementById("city"); city.multiple = true; //只要令该表达式为真就可以实现多选
<div id="uu" hidden>文字文字文字</div>
除了用hidden进行隐藏外，还可以
var uu = document.getElementById("uu"); uu.hidden = true; //只要令该表达式为真就可以实现隐藏
字符串属性
常见的字符串属性
id、title、href、src、lang、dir、accesskey、name、value、class
W3C全局属性
accesskey、class、contenteditable、dir、hidden、id、lang、spellcheck、style、tabindex、title、translate
data属性
<button id="btn" type="button" data-toggle="12345″ data-xx-yy="67890″>按钮</buttom>
获取data属性的值
var btn = document.getElementById("btn"); console.log(btn.dataset.toggle); //根据data-后面的名字获取 console.log(btn.dataset.xxYy); //如果data后面有两个-，那么采用驼峰形式的来获取
class属性（classList方法）
<body class=" aaa bbb ccc "> </body>
获取class各个属性名,用数组的形式输出
var CC = { getClass : function(ele){ return ele.className.replace(/\s+/, " ").split(" "); } } var body = document.body; console.log(CC.getClass(body));
判断 元素对象的className 是否存在
var CC = { hasClass : function(ele,cls){ //方法一 //return -1 < (" " + ele.className + " ").indexOf(" " + cls + " "); //方法二(classList方法) return ele.classList.contains(cls); } } var body = document.body; console.log(CC.hasClass(body,‘bbb‘)); //如果bbb的类名存在则返回true
给元素对象添加一个新的className
var CC = { addClass : function(ele,cls){ //方法一 //if ( !this.hasClass(ele,cls) ) //ele.className += " " + cls; //方法二(classList方法) ele.classList.add(cls); } } var body = docement.body; CC.addClass(body,‘ddd‘); //如果body里面不存在ddd，则添加ddd类名
删除元素的类名
var CC = { removeClass : function(ele,cls){ //方法一 //if ( this.hasClass(ele,cls) ) //var reg = new RegExp( ‘(\\s|^)‘ + cls + ‘(\\s|$)‘ , "gi" ); //ele.className = ele.className.replace(reg, " "); //方法二(classList方法) ele.classList.remove(cls); } } var body = document.body; CC.removeClass(body,‘aaa‘); //如果body里面存在aaa，则删除掉
元素类名 存在就删除，不存在就添加
var CC = { toggleClass : function(ele,cls){ //方法一 //if ( this.hasClass(ele,cls) ) //{ //this.remove(ele,cls); //}else{ //this.addClass(ele,cls); //} //方法二(classList方法) return ele.classList.toggle(cls); } } var body = document.body; CC.toggleClass(body,‘aaa‘); //如果aaa存在执行删除，不存在执行添加
标签：tor element 文字 spl log spel OLE rem classname
原文地址：https://www.cnblogs.com/mingliangge/p/12207676.html
