js中括号操作属性/js可控制换肤

最新推荐文章于 2022-04-08 12:43:11 发布

YRyr.*

最新推荐文章于 2022-04-08 12:43:11 发布

阅读量379

点赞数

分类专栏： CSS 文章标签： js中括号操作属性/js可控制换肤

本文链接：https://blog.csdn.net/weixin_43152725/article/details/85932768

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

document.write和innerHTML的区别？

答辩面试题

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js中括号操作属性</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			//oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
			var attr = 'color';
			// oDiv.style[attr] = 'red';
			/* 通过[]操作属性可以写变量 */
			oDiv['style'][attr] = 'red';

			/* 通过innerHTML可以读写元素包括的内容 */
			alert(oDiv.innerHTML);//读取标签里面包裹的元素，即“这是一个div元素”

			var oDiv2 = document.getElementById('div2');
			// oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
			oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签

			/*
			document.write和innerHTML的区别
			document.write只能重绘整个页面
			innerHTML可以重绘页面的一部分
			*/
		}
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
	<div id="div2"></div>
</body>
</html>

js可控制换肤

方法一：推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js换肤</title>
	<link rel="stylesheet" type="text/css" href="js.css" id="link1">
	<script type="text/javascript">
		window.onload = function(){
			var btn01 = document.getElementById('btn01');
			var btn02 = document.getElementById('btn02');
			btn01.onclick = skin01;
			btn02.onclick = skin02;
		}
		function skin01(){
			var link1 = document.getElementById('link1');
			link1.href = "js.css";
		}
		function skin02(){
			var link1 = document.getElementById('link1');
			link1.href = "js1.css";
		}

	</script>
</head>
<body>
	<input type="button" value="皮肤01" id= "btn01">
	<input type="button" value="皮肤02" id= "btn02">
	<div class="box01"></div>
	<div class="box02"></div>
</body>
</html>

方法二：不推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js换肤</title>
	<link rel="stylesheet" type="text/css" href="js.css" id="link1">
	<script type="text/javascript">
		function skin01(){
			var link1 = document.getElementById('link1');
			link1.href = "js.css";
		}
		function skin02(){
			var link1 = document.getElementById('link1');
			link1.href = "js1.css";
		}

	</script>
</head>
<body>
	<input type="button" value="皮肤01" onclick="skin01()">
	<input type="button" value="皮肤02" onclick="skin02()">
	<div class="box01"></div>
	<div class="box02"></div>
</body>
</html>

运算优先级

`    []    new
()
++    --
!    ~      +(单目)     -(单目）  typeof  void   delete
%    *   /
+(双目)      -(双目）
<<    >>    >>>
 <    <=   >   >=
 ==  !==  ===
 &
 ^
 |
 &&
 ||
 ?:
 =   +=   -=  *=  /=  %=  <<=     >>=    >>>=   &=   ^=  |=

YRyr.*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中括号操作属性/js可控制换肤

document.write和innerHTML的区别？答辩面试题document.write只能重绘整个页面innerHTML可以重绘页面的一部分&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中括号操作属性&l
复制链接

扫一扫