如何通过css选取元素以及封装了获取,删除css

html-css020

如何通过css选取元素以及封装了获取,删除css,第1张

通过id获取元素再易不过,但通过css获取元素就得自己写函数了。如下

参数一个是父亲元素,一个是要获取的css名,返回的是元素的数组集合,所以要这样用:var a=getByClass(oDiv, 'myDemoCss')[0]

1 function getByClass(oParent, sClass)

2 {

3 var aEles=oParent.getElementsByTagName('*')

4 var res=[]

5 var i=0

6

7 for(i=0i<aEles.lengthi++)

8 {

9 if(aEles[i].className==sClass)

10 {

11res.push(aEles[i])

12 }

13 }

14

15 return res

16 }

-==============css的相关操作就可以做成如下的函数了

//增加css

1 function addClass(obj,sClass)

2 {

3 if(!getClass(obj,sClass))

4 {

5 obj.className+=" "+sClass

6 }

7 }

//判断是否存在css 返回boolen

function getClass(obj,sClass)

{

var aClass=obj.className.split(" ")

for(var i=0i<aClass.lengthi++)

{

if(aClass[i]==sClass)

{

return true

}

}

return false

}

//删除css

1 function removeClass(obj,sClass)

2 {

3 var aClass=obj.className.split(" ")

4 for(var i=0i<aClass.lengthi++)

5 {

6 if(aClass[i]==sClass)

7 {

8aClass[i]=""

9 }

10 }

11 obj.className=aClass.join(" ")

12 }

1、先进行全局定义。比如

*{margin:0padding:0}

body,div,input{margin:0padding:0}(还可以加别的元素进去),各浏览器的不同大部分也就是对于边距的解释不同。

2、实现效果的方法有很多,尽量用科学合理的方法。比如你的这个input,你是用input去贴合一整张大背景图片。但其实可以把你的这个图片中输入框的部分单独做成图片,然后在input的样式表里定义背景。这样就算input跑偏了,也不会出现你图中这样与背景图分离的情况。这种方法虽然繁琐一点,但在方法上却是科学合理的。图片体积也小了,浏览器解释起来也快一些。

3、代码科学规范。不同的写法可能会有不同的效果,也会造成元素移位。比如明明设置了margin-top:10px却不起作用,这就跟上下文的写法相关。这个具体要看情况,不好作出说明。自己摸索吧。

本文讨论另一个重要的CSS特征:选择器,它可以用来在一个页面内选择元素风格化Web页。选择器类型CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器,类型选择器,类选择器,ID选择器,祖先选择器,子孙选择器,邻接兄弟选择器和属性选择器进行选择。这里我们将分别来看一下这几种方法(邻接兄弟和属性除外,我们将在下周进行讨论)。注意:浏览器对CSS选择器的支持是不一致的,不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。通用通用选择器允许你在整个页面中使用样式。基本上说来,一个样式并不指定具体的元素,类等,所以它适用于页面内的所有元素。这对设置颜色,字体等来说十分有用。通用选择器可用于页面上的所有元素,但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号(*)来表示一个通用选择器。列表A演示了如何使用通用选择器来为页面设定背景和默认的字体。类型风格化元素的一种最常用方法是通过它的类型。也就是说一个特定的元素拥有自己定义的样式,且这个样式可用于该类型的所有元素而不管元素在页面上的位置。列表B中的例子演示了用一个类型选择器来风格化页面中的所有段元素。使用这种类型选择器,叶面内的所有段落元素(除非被更多特定选择器覆盖)拥有特定的页边距和红色文本。现在你也可以自己建立CSS类来处理页面上的特定元素风格化问题。类在决定一个样式覆盖什么内容时,类选择器比类型选择器有更多的控制。由类选择器定义的样式可以用于具有类属性的所有元素,不管该元素在页面中的位置。它可以很好的控制那些元素接受样式。列表C中的例子演示了使用类只格式化页面中的第一段。所以第一段的是锯齿状的字体,而接下来的段落与此不同。类选择器不能使用HTML

保留的元素如heading,p,h1等等。你还可以通过用空格分开的方法对同一个元素使用多个类。列表D演示了使用多个类来风格化一个特定的段落。你可以将类选择器和类型选择器结合在一起使用,来风格化拥有分配的类的某些元素。在这个场景中,当定义样式时,元素名有一个由空格隔开的类名。列表E中的例子演示了这样的技巧,即仅拥有赋予的特定类名的段元素才风格化为某种方式,而拥有相同类名的头部风格化为另一种形式。