1. 设置标签属性
使用setAttribute()(‘属性名’, ‘属性值’)方法可以添加、修改、删除属性。
下面的demo是为input添加、修改、删除value属性:
1.1. HTML
<input type="text" class="input">
<input type="text" class="input">
<input type="text" class="input">
1.2. JS
// 添加value属性
document.querySelectorAll('.input')[0].setAttribute('value', "add value's attribute");
// 修改value属性
document.querySelectorAll('.input')[1].setAttribute('value', "change value's attribute");
// 删除value属性值
document.querySelectorAll('.input')[3].setAttribute('value', "");
注意:querySelectorAll 可以选择多个节点,以","分隔开,返回的是个数组;
2. 获取标签属性
使用 getAttribute(‘属性名’)方法获取标签的属性
下面的demo是获取input的name属性
2.1. HTML
// 添加value属性
<input type="text" name="zhangdan" class="input">
2.2. JS
const name = document.querySelectorAll('.input')[0].getAttribute('name');
console.log(name); // zhangdan
3. 删除标签属性
使用removeAttribute(‘属性名’)方法删除标签的属性
下面的demo是删除input的name属性
3.1. HTML
// 添加value属性
<input type="text" name="inputBox" class="input">
3.2. JS
const name = document.querySelectorAll('.input')[0].removeAttribute('name');
console.log(name); // undefined
4. 判断是否包含指定的属性
element.hasAttribute(“属性名”) 判断元素里面有没有对应的属性名
结果会返回布尔类型的值,true或false
const target = document.getElementsByClassName('test')[0];
target.setAttribute('data-name', 'test');
console.log(target.hasAttribute('data-name')); // true
target.removeAttribute('data-name');
console.log(target.hasAttribute('data-name')); // false
5. 去除 HTML 标签
function initData() {
var wordStr="<p>32545464536</p>"
console.log("去除标签后:"+delHtml(wordStr))
}
/**
* 去除 HTML 标签
* @param wordStr
* @returns {string}
*/
function delHtml(wordStr) {
var a,b,c,d,len,tagCheck
a = wordStr.indexOf("<");
b = wordStr.indexOf(">");
len = wordStr.length;
c = wordStr.substring(0, a);
if (b == -1)
b = a;
d = wordStr.substring((b + 1), len);
wordStr = c + d;
tagCheck = wordStr.indexOf("<");
if (tagCheck != -1)
wordStr = delHtml(wordStr);
return wordStr;
}
6. div 背景颜色 和 隐藏、显示 属性
6.1. 修改背景颜色
//字符串"adContainer" 是div里面的ID
document.getElementById('adContainer').style.backgroundColor = "#FF0000";
6.2. 显示、隐藏div
//显示背景
document.getElementById('adContainer').style.backgroundColor = "";
//隐藏背景
document.getElementById('adContainer').style.backgroundColor = "none";
6.3. jquery 动态修改元素的 background-image
$("body").css("background-image","url(" + s + ")");
7. img的src属性赋值
7.1. html页面
<img src="" id="logo"/>
7.2. js的普通赋值
document.getElementById("logo").src = "user.jpg";
7.3. Jquery赋值方法
$("#logo").attr('src',"user.jpg");
7.4. 取值
$("#imgId")[0].src;
8. checkbox状态设置
8.1. 选中状态的设置与获取
(1)获取checkbox是否选中:
$("#checkbox").is(":checked");
$("#checkbox-id")get(0).checked
$('#checkbox-id').attr('checked')
(2)设置checkbox是否选中
$("#checkbox").attr("checked", true);//设置为选中状态
$("#checkbox").attr("checked", false);//设置为未选中状态
$("#checkAll").prop("checked",false);//重新请求数据的时候把全选框变为未选中
8.2. 获取选中值和设置选中状态
(1) 设置选中状态JS代码
var listcheck = document.getElementsByName(“btn_check”);//获取checkbox列表
for (var i = 0; i < listcheck.length; i++) {
if (listcheck[i].value == result["personid"]) {//判断条件
listcheck[i].checked = true;
} else {
listcheck[i].checked = false;
}
}
(2) 获取选中值JS代码
var check=document.getElementsByName("ljzdcheck_update");
for(var i=0;i<check.length;i++){
if(check[i].checked==true){
selectidlist=selectidlist+check[i].id+",";
}
}
9. HTML5自定义属性
(1)自定义属性的目的:是为了保存和使用数据,有些数据可以保存到页面中而不用保存到数据库中
(2)自定义属性获取是通过 getAttribute(‘属性’) 方法获取
(3)但是有些自定义属性很容易引起歧义,不容易判断到底是元素内部的属性还是自定义属性
(4)H5中新增了标准
9.1. H5中规定自定义属性需要以 data- 开头做属性名并且赋值
<div data-name="test" ></div>
或者
element.setAttribute('data-name','test');
9.2. 获取H5自定义属性
兼容性较好的获取方法 getAttribute(‘属性’)
(1)H5新增方法(从IE11才开始支持,兼容性较差)
(2)element.dataset.属性;
(3)element.dataset[ ‘属性’ ];
dataset 可以理解成 集合 的意思,获得所有以 data-开头的 自定义属性,data-开头的自定义属性的集合
const target = document.getElementsByClassName('test')[0];
console.log(target.dataset);
console.log(target.dataset.name);
console.log(target.dataset.age);
注意:使用dataset操作data 要比使用getAttribute速度稍微慢些,虽然使用dataset不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。