JS---操作元素属性

最新推荐文章于 2020-04-12 13:46:51 发布

Go· again

最新推荐文章于 2020-04-12 13:46:51 发布

阅读量95

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_43766304/article/details/104866396

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

获取页面的元素属性，就可以对页面的属性进行操作，属性的操作包括属性的读和写

操作属性的方法

1."."操作

<!DOCTYPE html>
<html>
	<head>
		<meta id="we" charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				font-size: 20px;
				color: #00FFFF;
			}
			.box2{
				font-size: 30px;
				color: pink;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv = document.getElementById('div1')  //获取标签id号
				var oA = document.getElementById('link')
				var oDiv2 = document.getElementById("div2")
		
				//读取属性
				var sID = oDiv.id			
				//alert(sID)              //弹出弹窗
				
				 //写属性
				oDiv.style.color = "red";              
				oA.href = "http://www.baidu.com";
				oA.title = "这是去到百度的链接"
				
				oDiv2.className = "box2"
				
								
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<p>这是一个DIV元素</p>
			
		</div>
		<a href="#" id="link">这是一个链接</a>
		<div id="div2" class="box">
				这是第二个DIV
		</div>
	</body>
</html>

"[ ]"操作

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		
		
	</style>
	<script type="text/javascript">
		window.onload = function(){
				var oDiv = document.getElementById("div1");
				var sMystyle = 'color';
				var sValue = 'red';
				/* 
				这一句不起作用
				oDiv.style.sMystyle = sValue; 
				*/
			   //属性用变量来代替的话需要用中括号 []来操作
				oDiv.style[sMystyle] = sValue;
			
			
		}
		
	</script>
</head>
<body>
	<div id="div1">DIV元素</div>
</body>
</html>

Go· again

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS---操作元素属性

获取页面的元素属性，就可以对页面的属性进行操作，属性的操作包括属性的读和写操作属性的方法1."."操作<!DOCTYPE html><html> <head> <meta id="we" charset="utf-8"> <title></title> <style type="text/css"&...
复制链接

扫一扫

专栏目录