JavaScript访问CSS样式

最新推荐文章于 2021-08-04 00:58:16 发布

JZJZY

最新推荐文章于 2021-08-04 00:58:16 发布

阅读量158

点赞数

文章标签： JavaScript 前端 CSS 修改CSS样式

本文链接：https://blog.csdn.net/weixin_43772533/article/details/107016025

版权

style属性
单一单词的CSS样式属性，直接使用“对象名.style.样式名”来访问，如obj.style.color=“red”;
复合词，将复合符号“-”去掉，并将其后的单词首字母改成大写，如obj.style.fontSize=“18px”
className属性
当修改的样式比较多时，可以借助于样式表，为不同状态下的样式分别定义一个类选择器，在脚本中使用“对象名.className”来访问

<body>
	<div id="mydiv" style="width:100px;height:100px;background-color:#ccc;font-size:12px;">welcome to itany!</div>
	用户名：<input type="text" id="username" onfocus="doFocus()" onblur="doBlur(this)"><br/>
	密码：<input type="password" id="password"><br/>
	<input type="button" value="点我" id="btn">
</body>

在这里插入图片描述

//修改username对象的border样式
function doFocus(){
	var txt=document.getElementById("username");
	txt.style.border="1px solid red";
}

在这里插入图片描述

JZJZY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript访问CSS样式

style属性单一单词的CSS样式属性，直接使用“对象名.style.样式名”来访问，如obj.style.color=“red”;复合词，将复合符号“-”去掉，并将其后的单词首字母改成大写，如obj.style.fontSize=“18px”className属性当修改的样式比较多时，可以借助于样式表，为不同状态下的样式分别定义一个类选择器，在脚本中使用“对象名.className”来访问<body> <div id="mydiv" style="width:100px;he
复制链接

扫一扫