为什么js中设置定位,style.cssText有效,style.position无效。

JavaScript016

为什么js中设置定位,style.cssText有效,style.position无效。,第1张

jQuery CSS 操作

jQuery 拥有三种用于 CSS 操作的重要函数:

$(selector).css(name,value)

$(selector).css({properties})

$(selector).css(name)

函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值:

实例

$(selector).css(name,value)

$("p").css("background-color","red")

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值:

实例

$(selector).css({properties})

$("p").css({"background-color":"red","font-size":"200%"})

函数 css(name) 返回指定的 CSS 属性的值:

实例

$(selector).css(name)

$(this).css("background-color")

jQuery中没有获得全部css的功能。你可以直接使用js的这个功能,混用js和jquery代码不会出现冲突的情况。

1、直接更改,比如:

xID.style.display = "block" // 更改display属性,会覆盖css中的定义。

xID.style.display = ""      // 取消js更改display属性,以css样式为准。

这里的xID,是通过id获取的标签。当然,也可能是通过tagName之类的获取的标签。

这种方式,简单直接。但是要修改大量的样式的时候,不适合。所以,我更推荐第二种方式。

2、更改类名

xID.className = "xx   yy"

如果有多个类,就用空格隔开。前提,在样式中要有已有类的定义。比如这里的xx和yy类,在css中应该是写好的。

这种方式把所有的样式写在了css文件中,适合更改较多的样式以及炫酷的样式。js就只做一件事情:改类。至于这个类会把标签变成什么样子,交给css吧。

通过jquery也可以达到如上的效果:

$("#xID").css({

  fontSize:"12px",

  display:"block"

})  // 直接更改样式

$("#xID").addClass("xx")  // 增加删除类

$("#xID").removeClass("xx")

<div id="did" class="defcls"></div>

js 使用  ...style.[css属性(第二个首字母大写)]

var dom = document.getElementById( "did" )

      dom.style.color = "#000"

      dom.style.fontSize = "30px"

因为js选择元素很麻烦,所以建议引入jquery 库,操作元素很方便。也是常用的做法。

jquery

$('.defcls').css({color:'#000',fontSize:'20px'})

以上是直接修改元素的属性。直接修改 CSS样式表 就很麻烦了,一般不这样做。

js直接修改页面中的CSS样式表

var Hsheet = window.frames.wpages.document.styleSheets[0]//找到样式表

function setRules(name){

   for(var i = 0 i < Hsheet.cssRules[0].cssRules.length i++){

     if(Hsheet.cssRules[0].cssRules[i].selectorText===name){ //找到样式

Hsheet.cssRules[0].cssRules[i].style.color = "#000"

break

     }

   }

}

setRules('defcls')

这个方式比较罕见,只有在即为特殊的情况下,才会直接修改样式表,也是效率最低的一种。