【JS新手教程】JS修改css样式的几种方法

2021年09月15日 阅读数:1
这篇文章主要向大家介绍【JS新手教程】JS修改css样式的几种方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

本文试验了几种JS修改css样式的方法,
方法1:元素.style.样式=样式值。
方法2:元素.style.cssText=样式:样式值
方法3:元素.style[样式]=样式值javascript

.cssText这种,能够用一行改变本元素多个样式,直接后面写不少css样式。
.style.样式,这种,逐个样式进行修改。
若是样式有-短线,如background-color,能够用方法3,style跟着样式加中括号。css

测试代码:java

<style>#D1{background-color:#fcfe3f;padding:50px;margin:11px;border:10px solid blue;width:200px;}</style>
</head>
<body>
<input type="radio" id="r1" name="s" onclick="YB()" checked>黄蓝(默认)
<input type="radio" id="r2" name="s" onclick="PR()">粉红
<input type="radio" id="r3" name="s" onclick="GY()">绿黄
<br>
<div id="D1">文字</div>
<script language="javascript" type="text/javascript">   
 function YB(){
     document.getElementById("D1").style.background="#fcfe3f";
     document.getElementById("D1").style.border="10px solid blue";
 };
 function PR(){
     document.getElementById("D1").style.cssText="background:#e87ca2;border:10px solid red";
 };
  function GY(){
     document.getElementById("D1").style['background-color']="#84d192";//带-号的css样式用这个格式
     document.getElementById("D1").style['border']="10px solid #fcfe3f";
 };
</script> 

图示:点击单选框,选择不一样的背景色和边框色。测试