第十八课:样式操作

样式分为,外部样式(<link />),内部样式(<style></style>),行内样式(style:)。再加上一个important对选择器权重的干扰。

大体上,我们可以在标准浏览器上使用getComputedStyle,IE6-IE8下使用currentStyle来获取精确的样式。不过getComputedStyle不是元素上的方法,而是window的一个方法,它返回一个对象,这个对象可以调用getPropertyValue方法传入css标准风格的样式名获得其值。但是也可以使用属性+驼峰的风格去取值。我们可以写一个兼容的方法:

var getStyle = function(elem, name){   //传入元素,以及要查找的css属性的名字

  name = name.replace(/\-(\w)/g,function(all,letter){ 

        return letter.toUpperCase(); 

      }) ;

  //把css属性的名字改成驼峰形式的。all为匹配的子串,letter为子表达式匹配的子串,假设是margin-left,那么all为-l,letter为l,那么返回L,替换-l,就变成了marginLeft。这里需要改进,一些属性无法处理,比如:float,css3下的私有属性浏览器会有差异等。

  if(window.getComputedStyle){

    return window.getComputedStyle(elem,null)[name];   //第二个参数是处理伪类的,IE9不支持伪类的处理,因此这里要处理伪类的话,就会出错

  }

  else{

    return elem.currentStyle[name];

  }

}

接下来说一下需要注意的一些问题:

在标准浏览器下,如果元素节点没有插入DOM树,除了IE9-10,火狐,可以通过以上正常方法访问到内联样式外,其他的浏览器需要我们手动去找,可以通过$.contains方法。

在旧版本IE下,通过currentStyle取到的长,宽,如果有单位(比如:em,pc,pt),就很麻烦,它们不会自动进行单位换算。

float是js中的一个关键字,不能直接使用,就跟我在jQuery源码解析中说过的eval一样(http://www.cnblogs.com/chaojidan/p/4154310.html),IE这边用styleFloat,W3C用cssFloat代替。

CSS3中私有的前缀,IE:-ms-,Firefox:-moz-,Chrome:-webkit-,Safari:-webkit-,Opera:-o-。2013年初,谷歌嫌webkit内核太臃肿,决定单干,开发了blink,并在chrome28开始使用该内核,但是为了减轻用户负担,还是使用-webkit-做前缀。目前,使用-webkit-做前缀的有Opera,Safari,Chrome。

IE的前缀转换成js,前面的m是不大写的,而其他的浏览器会大写。举个例子:-ms-transform转换成js属性,就是msTransform,而-moz-transform,-webkit-transform转换成MozTransform,WebkitTransform。

透明度的设置:标准浏览器,包括IE9以及以上,设置透明度div{ opacity:0.5} (0-1之间的数,0不透明,1全透明)。opacity会同时让背景和内容透明,如果想让内容不透明,可以使用alpha。(比如:rgba,hsla)。IE6-8的透明度设置div{ filter:alpha(opacity=40)  }(0-100的数,相当于标准浏览器的0-1,0不透明,100全透明)。对于IE6-7,为了让透明设置生效,元素必须是拥有布局的(使一个元素拥有布局,很简单,设置元素的width,position,zoom=1等),判断一个元素是否拥有布局很简单,只要elem.style.hasLayout为true,就证明有布局。在IE7-8下,如果透明度为100,也就是全透明,会让文本模糊不清,不能设置100.

css3有一个叫user-select的样式,用于控制文本内容的可选择性。标准浏览器可以很方便的设置元素的这个样式,但是旧版本IE,没有这样的样式,必须使用unselectable属性代替。不过由于unselectable不具有继承性,加之子元素是位于父元素的上面,因此设置一个元素可选,要把它的所有子孙都设置才行。

background-position,背景图片的位置,比如:background-position:center;在js中取这个样式,backgroundPosition。IE6-7下没有这个属性,只有backgroundPositionX,backgroundPositionY,不过合起来就是backgroundPosition了。

z-index只能工作在被明确定义了absolute,fixed,relative这三个定位属性的元素中,它会让元素沿着z轴进行排序(z轴的起点为其父节点所在的层,终点为屏幕)。如果为正数,则离用户更近,为负数则离用户更远。举个例子:一个相对定位的父节点,然后里面有N个绝对定位的子元素,如果没有指定z-index,它们的显示方式按照出现的先后顺序排列,如果有z-index,就按照z-index的值排列,如果是负数,子元素就排在父节点的背后。但是有一些bug存在,比如IE6下的select元素,z-index为负数时,浏览器的差异化处理等。当我们获取一个元素的z-index值时,如果目标元素没有被定位,就往上回溯其祖先定位元素,找到,就返回定位祖先的z-index值,没找到,就返回0(IE返回0,其他标准浏览器返回auto)。如果元素定位了,就会去获取此元素的z-index,如果z-index不存在就返回0(IE返回0,其他标准浏览器返回auto),如果z-index的值不是数字(无效值),比如是"aaa"这种字符串,就会返回auto(所有的浏览器)。

时间: 2024-08-04 09:51:43

第十八课:样式操作的相关文章

NeHe OpenGL教程 第三十八课:资源文件

转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第三十八课:资源文件 从资源文件中载入图像: 如何把图像数据保存到*.exe程序中,使用Windows的资源文件吧,它既简单又实用. 欢迎来到NeHe教程第38课.离上节课的写作已经有些时日了,加上写了一整天的code,也许笔头已经

NeHe OpenGL教程 第二十八课:贝塞尔曲面

转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第二十八课:贝塞尔曲面 贝塞尔曲面: 这是一课关于数学运算的,没有别的内容了.来,有信心就看看它吧. 贝塞尔曲面 作者: David Nikdel ( [email protected] ) 这篇教程旨在介绍贝塞尔曲面,希望有比我更

NeHe OpenGL教程 第十八课:二次几何体

转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第十八课:二次几何体 二次几何体: 利用二次几何体,你可以很容易的创建球,圆盘,圆柱和圆锥. 二次曲面是一种画复合对象的方法,这种方法通常并不需要很多的三角形.我们将要使用第七课的代码.我们将要增加7个变量以及修改纹理以增加一些变化

斯坦福第十八课:应用实例:图片文字识别(Application Example: Photo OCR)

18.1  问题描述和流程图 18.2  滑动窗口 18.3  获取大量数据和人工数据 18.4  上限分析:哪部分管道的接下去做 18.1  问题描述和流程图 图像文字识别应用所作的事是,从一张给定的图片中识别文字.这比从一份扫描文档中 识别文字要复杂的多. 为了完成这样的工作,需要采取如下步骤: 为了完成这样的工作,需要采取如下步骤: 1. 文字侦测(Text detection)——将图片上的文字与其他环境对象分离开来 2. 字符切分(Character segmentation)——将文

第十八课 色彩样式与滤镜

图像中的色彩模式:(图像菜单——模式) 注:Ps的色彩模式是将某种颜色表示为数字形式的模式是一种记录图像颜色的方式,同一种文件格式可以支持多种色彩模式,部分颜色模式之间可以进行相互转换. Rib色彩模式由红,绿,蓝三种颜色混合而成又称为“光学三原色”,最具代表性的图层混合模式是“滤色” Cmyk色彩模式由青色,洋红,黄色,黑色四种颜色混合而成又称为“物料混合模式”,最具代表性的图层混合模式是“正片叠底”. Lab色彩模式:是Ps用来从一种颜色模式向另外一种颜色模式转换的一种内部颜色模式,是人眼可

第三十八课:动画引擎的实现

本课将通过源码分析的形式,来教大家如何实现一个动画引擎的模块. 我们先来看一个使用CSS3实现动画倒带的例子: .animate {    //这个animate类名加在上面的那个方块元素中,这个类名也可以是其他名字,比如:.move,只要设置的是那个方块元素就OK了. animation-duration:3s; animation-name:cycle; animation-iteration-count:2;    //动画播放的次数 animation-direction: altern

OpenGL教程翻译 第十八课 漫反射光(Diffuse Lighting)

OpenGL教程翻译 第十七课 环境光(Ambient Lighting) 原文地址:http://ogldev.atspace.co.uk/(源码请从原文主页下载) Background 环境光和漫反射光的主要不同是,漫反射光的计算需要依靠光线方向而环境光完全忽略了它!当只有环境光时整个场景被均等照亮.漫反射光会使物体面对光的部分比背对光的部分更加明亮. 此外漫反射光还增加了一点新的计算,光线的入射角决定了表面的亮度.通过下面的图片来演示这个概念: 让我们假设两条光线的强度是一样的,而唯一不一

Python第十八课(面向对象基础)

Python第17课(面向对象基础)    >>>思维导图>>>中二青年 什么是继承? 继承是一种关系,描述两个对象之间,什么是什么的关系 例如麦兜,佩奇,猪刚鬣 都是猪啊, 在程序中,继承描述的是类和类之间的关系 例如a继承了b, a就能直接使用b已经存在的方法和属性 a称之为子类,b称之为父类,也称之为基类 为什么要使用继承 继承的一方可以直接使用被继承一方已经有的东西 其目的是为了重用已经有的代码,提高重用性 如何使用继承 语法 class 类名称(父类的名称):

第三十八课、Qt中的事件处理(上)

一.图形界面应用程序的消息处理模型 二.Qt的事件处理 1.Qt平台将系统产生的消息转换为Qt事件(每一个系统消息对象Qt平台的一个事件) (1).Qt事件是一个QEvent的对象 (2).Qt事件用于描述程序内部或者外部发生的动作 (3).任意的QObject对象都具备事件处理的能力 2.GUI应用程序的事件处理方式 (1).Qt事件产生后立即被分发到QWidget对象 (2).QWidget中的event(QEvent*)进行事件处理 (3).event()根据事件类型调用不同的事件处理函数