微意技术博客

微意技术博客,记录一个web前端成长和学习历程的个人博客网站!

js改变html元素的css样式,这技能前端必备!

现在写前端代码都会用到很多的js,例如我现在要说的用js改变html元素的css样式,可以用的很多地方,比如说,网站弹出来的弹框,还有一些字体颜色或者别的样式,现在我来开始讲解。

语法:

  1. document.getElementById(id).style.property=new style 

比如我现在写一个简单的改变文字颜色:

  1. <a id="p2">我本是黑色的</a>  
  2.   
  3. <script>  
  4. document.getElementById("p2").style.color="blue"; //把ID为P2的元素字体颜色改变成蓝色 
  5. </script>  

上面这个是直接使用的,不需要点击或者别的判断,下面我来写一个需要点击的:

  1. <h1 id="id1">我是黑色的,点击事件改变了我</h1> 
  2.  
  3. <a onclick="document.getElementById('id1').style.color='red'"> //将ID1字体颜色改变成红色
  4. 点击这里 
  5. </a> 

我们可以按照这个例子实现很多的东西,可以改变很多样式,比如关闭弹层,自适应什么的,像我现在的博客的自适应导航就有用的这个:

  1. <script language="javascript" type="text/javascript"> 
  2. function show(obj){ 
  3. var obj=document.getElementById(obj); //获得id为b的容器 
  4. //如果下面的内容显示的话就隐藏 
  5. if(obj.style.display=="block"){ 
  6. obj.style.display="none"
  7. }else  
  8. obj.style.display="block"
  9. </script> 

这个是我博客网站手机自适应汉堡导航的开启和关闭的代码,可以给大家参考一下。

 

转载请注明出处:微意技术博客 - http://www.lovevy.cc//javascript/2016/0709/56.html

评论