在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表)、使用<style/>元素定义嵌入式样式(嵌入式样式表)、使用style特性定义针对特定元素的样式(内联样式表)。

要确定浏览器是否支持DOM2级定义的css的能力可以用

document.implementation.hasFeature("css2","2.0");//支持返回true,不支持返回false

1.访问元素样式

任何支持style特性的html元素在javascript中都有一个对应的style属性,可以通过该style对象获得和设置内联的样式,但不能获得和设置外部样式和嵌入式样式. 在css中用“-”相连的属性都改成驼峰大小写形式。但是float不能(因为是保留字),除了在IE中是styleFloat,其他浏览器中都是cssFloat.

var divnode=document.getElementById("mydiv");
divnode.style.backgroundColor="pink";//将ID为mydiv的元素背景设置为红色
divnode.style.height="100px";//设置高度

因为内联的样式优先级高,所以设置之后会覆盖外部样式和嵌入样式中的相同css属性。

<div id="mydiv" style="background-color:pink;height:100px;"></div>
alert(divnode.style.backgroundColor);//“pink"
alert(divnode.style.height);//"100px"
alert(divnode.style.width);//""(在这里width并没有在内联样式中,所以返回空字符.)

style对象还有下列属性和方法。

  1. cssText:访问到style特性中的css代码
  2. length:应用的css属性数量
  3. parentRule:表示css信息的CSSRule对象。
  4. getPropertyCSSValue(propertyName):范湖包含给定属性值得CSSValue对象。
  5. getPropertyPriority(propertyName):如果给定的属性使用了!important设置,则返回”important“;否则,返回空字符串。
  6. getPropertyValue(propertyName):返回给定属性的字符串值
  7. item(index):返回给定位置的css属性名称。
  8. removeProperty(propertyName):从样式中删除指定属性
  9. setProperty(propertyName,value,priority):将给定属性设置相应的值,并加上优先权标志(“important”或一个空字符串)

虽然style对象能够提供支持style特性的任何元素的样式信息,但不包括另外两种样式表层叠来并影响当前元素的样式信息

document.defaultView.getComputedStyle(元素,伪元素字符串);如果不需要伪元素则为null.返回的是一个CSSStyleDeclaration对象包含元素计算后的样式(含默认样式)。IE不支持

 #mydiv{ border: 2px blue solid;  }

也可以获取到该元素的其他css属性,但返回的内容跟浏览器相关。可以测试一下。

DOM访问元素样式和操作元素样式的更多相关文章

  1. document--文档中的操作,操作属性、操作样式、操作元素

    ---恢复内容开始--- document操作:    1.找元素   getE..    2.操作内容   非表单:innerHtml   表单:value    3.操作属性            ...

  2. Web自动化 - 选择操作元素 1

    文章转自 白月黑羽教Python 所有的 UI (用户界面)操作 的自动化,都需要选择界面元素. 选择界面元素就是:先让程序能找到你要操作的界面元素. 先找到元素,才能操作元素. 选择元素的方法 程序 ...

  3. 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. DOM中操作结点的属性_操作元素结点的样式

    有俩种方式操作结点的属性. 首先我们需要先获取所要操作的结点元素: var uname=document.getElementById("uname"); var gan=unam ...

  5. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  6. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  8. 《从零开始学习jQuery》:用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  9. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

随机推荐

  1. 进击的Python【第十七章】:jQuery的基本应用

    进击的Python[第十七章]:jQuery的基本应用

  2. jquery函数理解与运用

    javascript中有多种不用的方式去理解函数,函数类似于我们以前学过的数学函数,但是在程序设计中,我是按照下面的方式进行理解: 函数的理解: 函数是一个代码块,内容被包含在函数内,通常我们是把一些 ...

  3. 【转】SSL协议、SET协议、HTTPS简介

    一.SSL协议简介 SSL是Secure Socket Layer的缩写,中文名为安全套接层协议层.使用该协议后,您提交的所有数据会首先加密后,再提交到网易邮箱,从而可以有效防止黑客盗取您的用户名.密 ...

  4. 【转】《从入门到精通云服务器》第四讲—DDOS攻击

    上周咱们深入分析了云服务器的配置问题,好了,现在手上有了云服务器之后,我们又不得不提它:DDOS攻击.这是所有运维者的心头痛,也是任何公司听闻后都将心惊胆战的强大对手.下面我们将用浅显易懂的方式讲述什 ...

  5. 软件工程:黄金G点小游戏1.0

    我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  6. bug: 在缓存行高时,总是记录错误.

    一,现象: 1.在 cell 中添加了一个 label, 并对 label 设置了 attributeText, 结果滑动的过程中,cell 的高度总是不对,多次出现下一个 cell 覆盖上一个 ce ...

  7. 基础2.Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  8. Master-Slave通用基础框架

    一.设计目的 设计出一个通用的Master-Slave基础框架,然后可以基于这个框架来实现特定的业务需求,比如实现多节点并行计算.分布式处理等. 二.设计理念 基于经典的命令模式,Master和Sla ...

  9. Android :fragment介绍

    一.关于Fragmemt 1.Fragment(片段),主要是为了支持更多的动态和灵活的用户界面设计,如平板电脑.Fragment允许组合和交换用户界面组件,而不需要更改视图层次结构.通过把Activ ...

  10. PHPExcel按单元格读取数据

    import('ORG.Util.PHPExcel.PHPExcel'); $objReader = new PHPExcel_Reader_Excel2007(); //use excel2007 ...