html DOM 04 样式

2020-07-25 07:32:05 阅读：235 来源： 互联网

标签：style 04 DOM html backgroundColor var div d1

步骤 1 :

隐藏和显示

通过给元素的style.display 赋值，改变显示还是隐藏

<button onclick="hide()">隐藏div</button>
  
<button onclick="show()">显示div</button>
  
<br>
<br>
  
<div id="d">
  
这是一个div
  
</div>
  
<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}
  
function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}
  
</script>

步骤 2 :

改变背景色

通过给元素的style.backgroundColor 赋值，修改样式
你也许注意到了style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的
换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。
最好能够通过CSS的属性名，直接就进行修改了。比如通过这样的方式：

d1.css("background-color","green");

这样就仅仅需要使用CSS原本的属性名即可了。
Javascript并不提供这样的解决方案，但是到了JQuery就提供了这样的解决方案,请参考通过JQuery设置CSS

<div id="d1" style="background-color:pink">Hello HTML DOM</div>
 
<button onclick="change()">改变div的背景色</button>
 
<script>
function change(){
  var d1 = document.getElementById("d1");
  d1.style.backgroundColor="green";
}
</script>

标签：style,04,DOM,html,backgroundColor,var,div,d1
来源： https://www.cnblogs.com/JasperZhao/p/13375412.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html DOM 04 样式

隐藏和显示

改变背景色