教你js对象删除某个元素 js获取类名的3种方法( 四 )

2022-05-23 生活百科获取

var computedStyle = mydiv.currentStyle;console.log(computedStyle.backgroundColor);console.log(computedStyle.width);console.log(computedStyle.height);console.log(computedStyle.borderLeftWidth);兼容函数：
function getStyle(obj, attr){if(window.getComputedStyle)return getComputedStyle(obj, null)[attr];elsereturn obj.currentStyle[attr];}var mydiv = document.getElementById("mydiv");var backgroundColor = getStyle(mydiv, "background-color");console.log(backgroundColor);// rgb(245, 222, 179)// 或者function getCss(obj, css){return (document.defaultView.getComputedStyle ?document.defaultView.getComputedStyle(obj,null) :obj.currentStyle)[css];}var borderTopWidth = getCss(mydiv, "border-top-width");console.log(borderTopWidth); // 1px封装一下函数，用来获取CSS属性值，如：
function getComputedStyles(elem,prop) {var cs = window.getComputedStyle(elem,null);if (prop) {console.log(prop+" : "+cs.getPropertyValue(prop));return;}var len = cs.length;for (var i=0;i<len;i++) {var style = cs[i];console.log(style+" : "+cs.getPropertyValue(style));}}getComputedStyles(mydiv);// 查询所有getComputedStyles(mydiv,"background-color");// 只查询一个属性与伪元素一起使用：getComputedStyle可以从伪元素中提取样式信息（例如：::after, ::before, ::marker, ::line-marker）；
<style>#mydiv::after{content: "大师哥王唯";}</style><div id="mydiv"></div><script>var mydiv = document.getElementById("mydiv");var computedStyle = document.defaultView.getComputedStyle(mydiv,":after");console.log(computedStyle.content);<script>使用计算样式是可以获取元素的几何尺寸和位置的，但是其获得的结果并不一定是我们所期望的，此时可以使用getBoundingClientRect()，其返回的值是与呈现的效果是一致的；
console.log(computedStyle.left);// autoconsole.log(computedStyle.top);// autoconsole.log(computedStyle.width);// 300px// left:8 top:8 width:302，包括了bordervar rect = mydiv.getBoundingClientRect();console.log(rect);脚本化CSS类：
也可以脚本化元素的class属性，改变元素的class就改变了应用于元素的一组样式表选择器，它能在同一时刻改变多个CSS属性；
className属性：
与元素的class特性对应，即为元素指定的CSS类；由于class是ECMAScript保留字，所以在Javascript中使用className；
在操作类名时，需要通过className属性添加、删除和替换类名；
var mydiv = document.getElementById("mydiv");mydiv.className = "container"; // 设置mydiv.className = ""; // 删除mydiv.className = "other"; // 替换// 或if(mydiv.className == ""){mydiv.className = "container";}元素可以设置多个CSS类，其className中保存的是拥有多个类名的字符串，因此即使只修改字符串一部分，都会覆盖之前的值，所以每次都必须设置整个字符串的值；
var mydiv = document.getElementById("mydiv");console.log(mydiv.className);// db user disablemydiv.className = "container";console.log(mydiv.className); // container如果要从class中只删除一个类名，需要把多个类名拆开，删除不想要的那个，然后再把其他类名拼成一个新字符串，如：
// 如，删除user类// 首先，取得类名字符串并拆分成数组var mydiv = document.getElementById("mydiv");var classNames = mydiv.className.split(/\s+/);// 找到要删的类名var pos = -1, i, len;for(i=0, len = classNames.length; i<len; i++){if(classNames[i] == "user"){pos = i;break;}}// 删除类名classNames.splice(i,1);// 把剩下的类名拼成字符串并重新设置mydiv.className = classNames.join(" ");如果要添加类名，是可以直接通过拼接字符串完成，但在拼接之前，必须要通过检测确定不会多次添加相同的类名；
Element.classList属性：
HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，即classList属性，其是一个DOMTokenList对象，其是只读的类数组对象，与其他DOM集合类似，它也有一个表示自己包含多少个元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法，此外，这个新类型还定义如下的方法：

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

上一篇：苹果6强刷ios13教程苹果手机版本更新要多久

下一篇：adb查看所有应用包名 adb查看当前activity无效