JS-8.js中的css函数

最新推荐文章于 2023-11-20 07:12:52 发布

别忘了缩进

最新推荐文章于 2023-11-20 07:12:52 发布

阅读量838

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34737697/article/details/79214059

版权

8 篇文章 0 订阅

订阅专栏

  作用：修改css设置的值。 

  创建一个200*200px的块，使用js来更改width的值为300px。 

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="utf-8" /> 

  <title></title> 

  <style> 

*{

  margin: 0; 

  padding: 0; 

}

  #div1{ 

  width: 200px; 

  height: 200px; 

  background: #ccc; 

}

  </style> 

  <script> 

  function css(){ 

  if(arguments.length==2){ 

  return arguments[0].style[arguments[1]]; 

  }else{ 

  arguments[0].style[arguments[1]]=arguments[2]; 

}

}

  window.οnlοad=function (){ 

  var a1=document.getElementById("div1"); 

  css(a1,'width','300px'); 

}

  </script> 

  </head> 

  <body> 

  <div id="div1"></div> 

  </body> 

  </html> 

  其中 

  function css(){ 

  if(arguments.length==2){ 

  return arguments[0].style[arguments[1]]; 

  }else{ 

  arguments[0].style[arguments[1]]=arguments[2]; 

}

}

  定义这个css函数，函数中的判断部分，当arguments的长度=2的时候，返回要更改的对象和要更改的属性留作他用。当！=2的时候，设置在下面函数传进来的参数的值。 

  简化上面代码。 

  function css(obj,name,value) { 

  if(arguments.length==2){ 

  return obj.style[name] 

  }else{ 

  obj.style[name]=value; 

}

}

  此时，不让他们用arguments来存储任意值，直接定义三个参数，对象，名称，值。 

 
 获取css值 

  当前大多数的css样式都是非行间的，我们要在js中获取到非行间的css设置，需要用到 

  getComputedStyle(a,b) 

  a是要获取的对象，b是伪类 

  getComputedStyle方法是只读的，只能获取样式，不能设置。 

  兼容性： 

  window.οnlοad=function () { 

  var a1=document.getElementById('div1'); 

  alert(getComputedStyle(a1,false).width); 

}

  结果： 

  处理兼容性问题（老版本IE）： 

  window.οnlοad=function () { 

  var a1=document.getElementById('div1'); 

  if( 
 a1.currentStyle){ 

  alert(a1.currentStyle.width); 

  }else{ 

  alert(getComputedStyle(a1,false).width); 

}

}

  解释：加入判断，当a1元素存在currentStyle时，判断为true，就会执行老版本IE的语句，当不存在currentStyle时，就会执行else中的新版本的语句。 

  在js的使用过程中会经常获取css的值，若每次都做判断来取值会很麻烦，此时我们可以将这个判断封装成一个函数： 

  function getStyle(obj,name) { 

  if(obj.currentStyle){ 

  return obj.currentStyle[name]; 

  }else{ 

  return getComputedStyle(obj,false)[name]; 

}

}

  此时将获取css值的函数封装成了getStyle()函数，来看看如何使用： 

  window.οnlοad=function () { 

  var a1=document.getElementById('div1'); 

  alert(getStyle(a1,'width')); 

}

  实例：创建一个div，可由用户输入值来控制其宽度，高度，背景颜色。 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>Title</title> 

  <style> 

*{

  padding: 0; 

  margin: 0; 

}

  #div1{ 

  width: 200px; 

  height: 200px; 

  background: #200; 

}

  </style> 

  <script> 

  function css(obj,name,value) { 

  obj.style[name]=value; 

}

  window.οnlοad=function () { 

  var a1=document.getElementById('div1'); 

  var in1=document.getElementsByTagName('input')[0]; 

  var in2=document.getElementsByTagName('input')[1]; 

  var in3=document.getElementsByTagName('input')[2]; 

  var btn1=document.getElementsByTagName('button')[0]; 

  var btn2=document.getElementsByTagName('button')[1]; 

  var btn3=document.getElementsByTagName('button')[2]; 

  btn1.οnclick=function () { 

  css(a1,'width',in1.value); 

}

  btn2.οnclick=function () { 

  css(a1,'height',in2.value); 

}

  btn3.οnclick=function () { 

  css(a1,'background',in3.value); 

}

}

  </script> 

  </head> 

  <body> 

  <div id="div1"></div> 

  请设置宽度：<input type="text"><button>确定</button><br> 

  请设置高度：<input type="text"><button>确定</button><br> 

  请设置颜色：<input type="color"><button>确定</button><br> 

  </body> 

  </html> 

关注

专栏目录