笔记:JS设置CSS样式的几种方式

html-css012

笔记:JS设置CSS样式的几种方式,第1张

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")

css中经常会遇到设置了父元素的透明度后,会直接影响到子元素的透明度。

例如:

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。

即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。

解决方法:

为父元素设置background: rgba(0,0,0,0.5)时设置透明度,不再加opacity属性。

直观点讲就是用外边距把box撑成居中。

margin也可以用顺时针的方式以一个语句定义四个外边距的大小

margin有一个auto属性用来设置浏览器边距,只能用在宽度上,不能用在高度上。

可以看到现在box实现了水平居中。

margin和padding一样可以简写。

margin负值可以让边框与浏览器合并。

margin为0的时候,box与浏览器还是有一段距离的,并没有完全贴边。

而想要贴边的话,可以给body单独一个标签选择器,令其margin=0,再让box类的margin-left=0.

以margin-left为例,给正值,box就向右边走,而给负值的话,box就向左侧走。我们管正值叫正方向,负值叫反方向。

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一个小练习 :制作下面的菜单效果:

效果:

发现中间的线似乎粗了点,这个问题是上一个格子的底边和下一个格子的顶边重合导致的。

这时候就要应用到margin的负值了,在选择器中加入下面这条语句

外边距合并指的是,当两个垂直外边距相遇时,长的外边距会将短的外边距替换。

一个例子:

建立两个盒子之后,我们想设置margin好让两个盒子分开。

我们想让两个盒子分开的更大一点,于是调整第二个盒子的顶部外边距

解决方法如下: