关于获取、设置css样式封装的函数入门版

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4          <title>CSS样式的获取和设置:简单版</title>
 5         <style type="text/css">
 6           #div {
 7               width: 100px;
 8               height: 100px;
 9               background: pink;
10               }
11          </style>
12          <script type="text/javascript">
13              //根据id获取元素
14              function $(id) {
15                  return document.getElementById(id);
16             }
17              //获取样式
18              function getStyle(obj, attr) {
19                  //哪个对象obj
20                  //哪个属性attr
21                  //兼容IE
22                  if (obj.currentStyle) {
23                      return obj.currentStyle[attr];
24                  }
25                  else {
26                      //兼容谷歌 火狐
27                      return getComputedStyle(obj, false)[attr];
28                  }
29              }
30
31              //获取或者设置CSS的属性
32              function css(obj, attr, value) {
33                  //获取CSS的数值
34                  if (arguments.length == 2) {
35                     return getStyle(obj, attr);
36                  }
37                  //设置CSS的数值
38                  if (arguments.length == 3) {
39                     obj.style[attr] = value;
40                  }
41              }
42              //调用CSS()方法,进行测试
43              window.onload = function() {
44                  css($("div"), "width", “200px”);
45              }
46              // 最后可以把这写在一起,一个函数就搞定
47              function css(obj,attr,value){
48                 var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
49                 if(arguments.length === 2){
50                     return getStyle;
51
52                 }else if(arguments.length === 3){
53                     obj.style[attr] = value;
54                 }
55             }
56         </script>
57      </head>
58        <body>
59          <div id="div"></div>
60      </body>
61 </html>  
时间: 2024-12-28 18:47:51

关于获取、设置css样式封装的函数入门版的相关文章

(转载)记录函数 getStyle() 获取元素 CSS 样式

设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = '#000'; 然而,很多时候我们在修改元素的样式之前要先保留元素原来的样式属性值,或许可以这么做: var bc = element.style.backgroundColor; 这么做有可能获取到element元素的background-color属性值,但是,在多数情况下获取到的确实 'unde

获取元素计算后的css样式封装

获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[attribute];}else { return window.getComputedStyle(obj,null)[attribute];} } 案例: <!DOCTYLE html> <html> <head> <meta charset="uft-8&qu

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100

cssText设置css样式

js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no');obj.style.width = '400px';obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把.一般情况下都会结合cs

DOM设置css样式

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM设置css样式</title> <!-- p.style.fontSize=100px; 解读: 设置元素p的样式字体大小=100px; 样式属性不能有“-”符号,要写出驼峰形式 切记,除了getElementById获取到的元素,其他都要通过数

5、通过js代码设置css样式

1.页面 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv=&

如何为要被打印的内容设置CSS样式属性

如何为要被打印的内容设置CSS样式属性:有时候我们要打印的内容也是需要美观度的,并不希望太原汁原味了,所以要对其进行一下样式设置,本章节就简单介绍一下,如何利用CSS设置要被打印内容的样式,方式有多种,下面一一做一下简单介绍.一.使用link引入外部样式表: <link rel="stylesheet" href="css/style.css" media="screen" /> 以上代码的CSS样式用于屏幕显示效果,对于打印无效.关

3.通过js代码设置css样式

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

react学习(四)之设置 css样式 篇

react中设置css样式 方法一: 行内样式:使用{{  }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> { this.renderButton() } </div> 样式比较多的话不建议使用该方法. 可以使用方法二 方法二: 在jsx文件中定义样式变量, let buttonStyle = { //定义style变量 backgroundColor: 'blue', float: 'left' a