1、原生js给DOM元素添加一个类名
方法一：
使用DOM.setAttribute("class","类名")
方法二：
DOM.classList.add("类名")
方法一给DOM元素添加类名会覆盖原有的类名
方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名
2、原生js中如何添加dom元素
(1) appendChild()
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
使用方式：fatherdom.appendChild( insertdom )。
兼容性：所有浏览器都支持此方法。
(2) insertBefore()
概念：把要插入的节点添加到指定父级里面的指定节点之前。
使用方式：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在
(3) 举例
<!DOCTYPE html>
<html lang="en">
<head>
<title>practise</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
#container {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div class="aa">aa</div>
<div class="bb">bb</div>
</div>
<script>
var Java = function (content) {
this.content = content;
(function (content) {
var div = document.createElement('div');
div.innerHTML = content;
div.style.color = 'green';
document.getElementById('container').appendChild(div)
})(content)
};
var Html = function (content) {
this.content = content;
(function (content) {
var div = document.createElement('div');
div.innerHTML = content;
div.style.color = 'red';
var bb = document.getElementsByClassName("bb")[0];
document.getElementById('container').insertBefore(div, bb)
})(content)
};
Java("这里是Java模块");
Html("这里是HTML模块");
</script>
</body>
</html>
效果
image.png
js判断元素是否包含某个class名
element.className.indexOf('rgb196') !== -1
//为-1则不包含该class
<div class="title-article-copy"></div>
//如果判断是否包含 "title-article" 这个类名呢
$ele.className.split(/\s+/).indexOf(targetClass) === -1
//这样的方法可能更好一点
js给a 按钮增加disable属性
//启用
dom.setAttribute("disabled","disabled")
//禁用
dom.removeAttribute(“disabled”)
jquery设置
$("#id").attr("disabled","disabled")
$("#id").removeAttr("disabled")
注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。
网友评论