网站首页 > 技术文章正文

JavaScript 操作DOM属性和属性值（dom操作元素属性）

nanyue 2024-10-04 18:19:47 技术文章 10 ℃

点(.)属性操作

<!DOCTYPE html>
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>属性值操作</h2>
<p><input type="text" name="username" value="tom" class="orange" id="mingzi" weight='130' /></p>
<p><input type="button" value="获取" onclick="f1()" /></p>
<p><input type="button" value="设置" onclick="f2()" /></p>
</body>
</html>
<script type="text/javascript">
//设置属性值
function f2(){
var it = document.getElementById("mingzi");
it.name = "usermail";
it.value = "jim@163.com";
it.className = "apple";
it.setAttribute("weight",155);
it.type = "checkbox";
}
function f1(){
var it = document.getElementById("mingzi");
console.log(it.type);
console.log(it.name);
console.log(it.className);
console.log(it.id);
console.log(it.getAttribue("weight"));
console.log(it.getAttribute("value"));
}
</script>

实例2：

<!DOCTYPE html>
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>属性节点获取</h2>
<p><input type="text" name="username" value="tom" class="orange" id="mingzi" weight='130' /></p>
</body>
</html>
<script type="text/javascript">
var it = document.getElementById('mingzi');
var attrs = it.attributes; //把全部属性节点以一个"对象集合"形式返回
console.log(attrs);//[type="text", weight="130", id="mingzi", class="orange", value="tom", name="username"]
//获得具体某个属性的"属性节点"
console.log(attrs.value);//value="tom"
console.log(attrs.id);//id="mingzi"
console.log(attrs.id.nodeType);//2 属性节点
console.log(it.nodeType);//1 元素节点
</script>

[]中括号操作属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
}
</style>
</head>
<body>
<div>注意文字颜色的变化</div>
<script type="text/javascript">
//js对象
var js_div = document.getElementsByTagName("div")[0];

css(js_div,"color","orange")
css(js_div,"font-size","100px")
css(js_div,"backgroundColor","red")
css(js_div,"font-style","italic")
css(js_div,"font-weight","900")

function css(elem,attr,value){
elem.style[attr] = value;
}

</script>
</body>
</html>

变量属性的写法很灵活: 驼峰式(backgroundColor)、中划线(font-style)

变量属性必须通过[]括号操作

<script type="text/javascript">
var obj = {
"name": "梁永灿",
"sex": "男",
"age": "18",
"sing": function(){
console.log("我会唱传奇");
}
}
for(var key in obj){
//console.log(key);//所有的key拿到了
console.log(obj[key]);//对象变量 必须通过[]
}
</script>

getAttribute()和setAttribute()操作属性(能够操作自定义属性)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<div id="div" data-src="我是瞎写的">俺是一个div</div>
<script type="text/javascript">
console.log(div.data-src)
console.log(div["data-src"])
//上面两种操作不了自定义属性

//div.getAttribute(属性名);//得到属性
console.log(div.getAttribute("id"));
console.log(div.getAttribute("data-src"));


//div.setAttribute(属性名,属性值)
div.setAttribute("zdy","自定义属性");
div.setAttribute("title","悬浮我看看效果");

</script>
</body>
</html>

上一篇： JavaScript的Class语法介绍（js class实现原理）
下一篇： Javascript定义类(class)的三种方法你喜欢哪种?

网站首页 > 技术文章 正文

JavaScript 操作DOM属性和属性值（dom操作元素属性）

猜你喜欢

网站首页 > 技术文章正文