javascript高级程序设计学习(五)------访问与修改Style样式

最新推荐文章于 2022-11-09 11:10:50 发布

SwordMars

最新推荐文章于 2022-11-09 11:10:50 发布

阅读量382

点赞数

分类专栏： js学习笔记文章标签： javascript css function div float button

本文链接：https://blog.csdn.net/SwordMars/article/details/6821325

版权

js学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. style对象

语法: 访问var sColor=oDiv.style.color 修改 oDiv.style.color="red";

style对象属性的命名规则, color---->color font-family-------->fontFamily border-color---->borderColor;

-moz-border-radius----->MozBorderRadius (前面为css命名，后面为style对象属性)

注:float比较特别，不符合上述命名规则 float---->styleFloat ( cssFloat for IE)

另外一种方法是style的 getPropertyValue方法，不过IE8及以下都不支持这种方法。

语法规则访问 var sColor=oDiv.style.getPropertyValue("color"); var sFontFamily=oDiv.style.getPropertyValue("font-family"); 传递的参数名与CSS命名一致。

2. 访问CSS内联或外联文件

DOM 中 document.styleSheets[0].cssRules

IE8及以下 document.styleSheets[0].rules;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DOM访问CSS文件</title>
<style type="text/css">
 div.hover{
	 background:skyblue;
 }
 div.out{
	 background:yellow;
 }
</style>
<script>
  function changeBg()
  {
	  var cssRule=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
	  cssRule[1].style.background="red";
  }
</script>
</head>
<body>
   <div class="hover">b</div>
   <div class="out">b</div>
   <input type="button" onClick="changeBg()" value="ChangeColor"/>
</body>
</html>

上面这段代码在点击按钮后第二个div的背景将从黄色变成红色.

3. 最终样式

最终样式，就是浏览器通过计算css文件，和style=" "中的样式得到的最终显示出来的样式。

在DOM支持较好的浏览器中用document.defaultVie.getComputedStyle(oTarget, null)访问，在IE中可以用oDiv.currentStyle访问，他们返回的对象访问的方式和上面的style对象一样，但此对象不能被赋值，只能被访问。

有了上面这些知识，我们可以简单做javascript修改CSS样式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery CSS原理</title>
<script src="jquery-1.6.2.min.js"></script>
<script>
  function getFStyle(oTarget)
  {
	  return oTarget.currentStyle||
	  document.defaultView.getComputedStyle(oTarget,null);
  }
  function setStyle(oTarget,oCss)
  {
	  for(key in oCss)
	   {
		    oTarget.style[key]=oCss[key];
	   }
	   
  }

//在下面的两种设置style方法执行后,在 chrome的javascript控制台工具中可以看到test,test2的style=""内容完全一样。说明jlQuery对象修改styl//e的方法就如上     没有看过jquery源代码，纯属个人猜测
  function test()
  {   
	try{  var oCss={"width":"300px","height":"200px","background":"yellow","float":"right"};
	
	 setStyle(document.getElementById("test"),oCss);
	 }catch(err){alert(err);}
	 $("#test2").css({"width":"300px","height":"200px","background":"yellow","float":"right"});
	
  }
</script>
</head>

<body>
 <div id="test" style="width:100px;border:1px solid lightblue;min-height:100px"></div>
 <div id="test2" style="width:100px;min-height:100px;border:1px solid green;"></div>
 <button id="btn" onClick="test()">点击修改CSS样式</button>
</body>
</html>

参考图书:<<javascript高级程序设计>>