第二十五讲：学一点点JS（五）JS操作CSS属性和HTML属性

CSS属性服务于HTML标签，亦即，选择器里面的每一个属性都是在描述对应HTML标签的对应样式，比如说 width 属性定义的是元素的宽度，以键值对的方式进行设定，width: 400px; 表示，元素的宽度为400个像素。这一点从前面的课程中应该已经有印象，我们再举例说明以明晰相关概念——主要是理解并能分辨CSS属性和HTML属性，以便学习和掌握JS对不同类型属性的具体操作。试看以下CSS样式+HTML标签的代码结构：

<style>
.tzbox {
	width: 400px;
	height: 200px;
	border: 1px solid gray;
	padding: 10px;
}
</style>

<div class="tzbox"></div>

<style> ... </style> 包裹其中的是CSS代码，亦即，style 是一个CSS标签，它表明它连同它里面的代码是web页中的CSS代码。上例CSS代码中，我们创建了一个class选择器名为 tzbox，名称之前的 . 号表示这是一个 class 选择器，写成 .tzbox。然后，用花括号 {} 将需要的CSS属性一个一个地表达出来：width、height 属性分别是将来使用这个选择器的元素的宽与高，border 是边框，padding 是内边距，这些，称为CSS属性，属性名之后用冒号带出属性值，这叫键值对；可以一行写一个键值对即属性和属性值，写完属性值要用小角分号 ; 收尾，各个语句也可以连在一起写，每句结束必须使用小角分号 ; 收尾。每一行（个）键值对代码都是描述HTML标签的样子，只要该标签带有 class="tzbox" 就按 .tzbox 选择器所描述的样子出现在页面中；这叫绑定：将HTML标签和CSS选择器进行捆绑，id="xxx" 或 class="xxx" 就是通过id或class绑定标签和选择器；绑定还有直接的方式，例如CSS的元素选择器，像 p {...} 就直接绑定了p标签，无需在p标签中带上属性名。

代码中的最后一行是一个 div 标签，是HTML代码，该 div 标签有 class="tzbox" 属性和属性值，等号左边是属性名、右边是属性值，此属性是 HTML 属性，称为标签或元素即例中的 div 的 class属性，class属性指该标签的类名，也就是一类通过 class 属性表明自己绑定了CSS类选择器的元素。不止一个标签可以绑定CSS类选择器，但若使用的是 id，比如 id="abox"，则同一页里只能有一个标签这么做，这个 id，对于HTML标签而言是元素的HTML id属性，对于CSS而言则是 id 选择器，和 class 选择器一样，其下的花括号里是一个或多个CSS属性设置。

至此，我们应该理解：CSS属性存在于CSS代码中，它们描述诸如元素宽度、边框、定位等，存在方式是 健名: 键值;。CSS属性还可以以 style="健名1:键值;健名2:键值;健名N:键值;" 的方式存在，style作为一个HTML属性用以存储CSS代码；HTML属性是HTML代码中以等号的形式将属性和属性值建立起关系，例如 width="600" 可以用来表示图片标签的宽度，等号前的是属性名，等号后面的是属性值，属性值一般要用小角引号包裹，里面不能有px等单位。

不同的HTML标签可以在HTML代码中带有不同的HTML属性，我们举几个例子并在代码后面加以简单说明：

<div class="tbox" style="color: red;"></div>
<img id="mypic" src="图片地址" width="400" height="360" alt="" title="我的图片" />
<video id="vid" src="MP4地址" autoplay="true" loop="true"></video>
<input id="mybutton" type="button" value="点我登录" />
<button id="bnt333" type="button" value="333">点击这里提交资料</button>

这些标签，有些属性是必须的，比如图片的 src 和 alt 属性不能缺，有些是可以不要的，比如 div 使用style属性设置CSS样式更倾向于在对应CSS选择器中进行设置，有些根据情况决定，比如id属性和class属性是否同时设置依据的是该标签是否还需要对应的CSS class选择器来补充设置它的样式或是否需要id属性便于后续的JS对它进行操作。HTML属性和CSS属性都是用来设置HTML标签的样式，但除开必不可少的属性和CSS没有的属性外，HTML属性能不用就不用，就是说，能用CSS属性的尽量用CSS来设置，不能的才用HTML属性——例如 src、autoplay、loop、muted 等这些基于媒体标签的HTML属性。

HTML属性和CSS属性都是用来设置HTML标签，JS对它们的操作方法却不一样。规则是，对于HTML标签代码中出现的HTML属性，直接使用 元素.属性名 操作，对于style标签里各选择器的CSS属性，则要有 style 关键字，style 表示的就是CSS代码的标签，使用 元素.style.属性名 操作就是操作元素绑定的CSS选择器中的属性。试看如下例子的JS代码，两个按钮的点击事件分别操作id="divbox1"元素的HTML属性即 title 属性和CSS属性即 height 属性：

<style>
#divbox1 {
	width: 400px;
	height: 100px;
	border: 1px solid gray;
	padding: 10px;
}
</style>

<div id="divbox1">点击下方第一个按钮前、后请将鼠标移动我这里<br>点击第二个按钮前、后注意观察我的高度</div>
<p><input id="btn251" type="button" value="设置div的title属性（HTML属性）" /></p>
<p><input id="btn252" type="button" value="设置div的height属性（CSS属性）" /></p>

<script>
btn251.onclick = () => divbox1.title = '我是一个 DIV\n我很酷';
btn252.onclick = () => divbox1.style.height = '200px';
</script>

点击查看效果

很多时候我们可能不得不操作一系列的CSS属性，JS早就支持这一需求，它提供了一个基于 style 的属性关键字 cssText，字面意是CSS文本，它可以帮助我们像写CSS代码那样在JS中动态设置元素的CSS属性。下面的例子要解决的问题是，给一个没有制定CSS样式的div临时设置CSS样式，演示后按提示点击相应的地方，div就得到美化：

<div id="divbox2">点击这里给我化妆</div>

<script>
divbox2.onclick = () => {
	divbox2.style.cssText = `
		width: 600px;
		height: 200px;
		font-size: 2rem;
		text-shadow: 1px 1px 2px gray;
		background: lightblue;
		border: 2px solid #${Math.random().toString(16).substring(2,8)};
		padding: 10px;
	`;
	divbox2.innerText = '感谢你美容师！祝你和我一样漂亮！';
};
</script>

点击查看效果

上面的演示可以反复点击div，不过后续的动态变化的仅有div的边框颜色。边框的颜色设置也是例子代码中唯一不同于CSS属性设置的地方，border属性中的颜色设置，使用了一个JS语句 ${Math.random().toString(16).substring(2,8)}，这是一个链式语句，其意为，随机数 Math.random() 所得结果转变为十六进制字符串，toString(16)，再从十六进制字符串的第3个字符串开始截取单个字符，总共截取六个字符，代码 substring(2,8) 的参数中，2对应于字符串的第3个字符，8表示截取到原字符串的第8位字符（字符从0起算，0代表第一个字符）。JS写CSS属性妙就妙在以JS的方式支持动态变化，此方式体现在字符与JS语句的拼接，使用的是 ${JS语句} 这样的方式，前提是反引号——字符必须放在反引号 `` 中才可以使用 {...} 以及变量值分行书写。反引号 `` 和 小角引号 '' 外观不一样，请观察比较。

而要改变元素的HTML属性，一般就只能一个一个属性地操作，好在普通元素的HTML属性并不多，特殊的标签，如 img（图片）、audio（音频）、video（视频）、input（表单相关）、button（按钮）等则有各自的特定HTML属性，这需要熟悉这些特定标签的HTML属性到底都有哪些，需要时可以查查资料。

除了元素的CSS属性和HTML属性，HTML元素还事实存在JS属性，尽管术语并没有JS属性这个概念。实际上，JS为不同的元素都是封装有相应的JS属性，有些属性是可读写的，例如div等元素的innerHTML、innerText、textContent，有些JS属性是只读的，例如音画帖经常用到的音频 audio 标签——它的一个重要的JS属性 paused 就是判断音频控件暂停中的依据，我们音画帖中的联动函数就依靠这个只读属性的值去动态地管控CSS关键帧动画、视频等工作，大家可以回头看看相关教程。而对于一些特定控件，JS还提供了可操控的方法，例如 audio 标签的 play() 播放方法、pause() 暂停方法等等。这里进一步解释一下JS属性和方法的异同：JS属性用来表明元素的状态，比如 audio.paused 返回两种可能的值 true 或 false 表明音频的暂停状态为真或为假；JS方法用来驱动元素对交互的相应，例如，audio.play() 和 audio.pause() 分别用来命令音频控件播放和暂停，方法如同函数，所以命令关键字的后面都会紧跟着小括号，有时括号里还可以带参数。

css+html+js是web页的有机组合，JS主要负责实现交互、动态等功能，因此，JS能操作CSS属性、HTML属性是理所当然的，特定元素另外附有特定的JS属性和JS方法也不足为奇，是HTML早已封装好的元素预设集成的相关接口，留待JS等脚本语言去使用，我们要做的是尽可能去熟悉不同HTML标签的这些属性和方法，实在记不了那么多也没关系，使用的时候查查资料。

作业一：有一个元素，部分代码如下所示，它已经拥有CSS样式，但我们还希望在交互时它能动态地产生一些变化，具体是，设备指针（pointer）移入元素界面时前景色是红色、背景色是浅绿色，移出时前景色是黑色、背景色是浅蓝色。CSS+HTML代码如下，JS部分是作业内容。

<style>
#divbox3 {
	width: 600px;
	height: 200px;
	font-size: 2rem;
	text-shadow: 1px 1px 2px gray;
	background: lightblue;
	border: 2px solid gray;
	padding: 10px;
}
</style>

<div id="divbox3">请将设备指针移入、移出查看效果</div>

提示：① 设备指针和鼠标指针很相似，兼容鼠标指针，onpointerover 监听事件、onpointerout 监听事件和 onmouseover、onmouseout使用方法一样，作业请使用 pointer 相关监听事件完成；② 指针移入 onpointerover 和 指针移出各自操作 元素.style.* 属性以改变元素的前景色和背景色，可以考虑 元素.style.CSS属性 或 元素.style.cssText 完成，如果使用cssText，因为元素已有CSS属性，建议使用 += 符号给元素赋值，它表示在原基础上再加这个（些）属性和属性值。

作业二：同样使用上述代码结构，请通过纯CSS方式实现作业一JS能实现的功能。提示：本作业不使用JS，仅需给 CSS 加一个伪类选择器。

返回目录