在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. JQuery.validate.js 表单验证

    官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/API: http://jquery.bassistance.de ...

  2. iOS 之 退出app(项目)的几种方法

    路漫漫其修远兮,吾将上下而求索.也算是对程序员的一种真实写照了吧. 今天想研究一下iOS中退出项目的方法,说是今天,其实也关注并去了解很久了.只是始终找不到自己认为很好的方法.今天就先把自己了解的列举 ...

  3. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  4. 弱省互测#1 t3

    题意 给出一棵n个点的树,求包含1号点的第k小的连通块权值和.(\(n<=10^5\)) 分析 k小一般考虑堆... 题解 堆中关键字为\(s(x)+min(a)\),其中\(s(x)\)表示\ ...

  5. [RxJava^Android]项目经验分享 --- 异常方法处理

    简单介绍一下背景,最近RxJava很火,我也看来学习一下,计划在项目的独立模块中使用它.使用过程中遇到很多问题,在这里记录分享一下.可能有使用不当的地方,大家多多包涵.对于RxJava的基本概念和功能 ...

  6. 阮一峰对js的见解(10大缺陷)

    一.为什么Javascript有设计缺陷?这里有三个客观原因,导致Javascript的设计不够完善.1. 设计阶段过于仓促Javascript的设计,其实只用了十天.而且,设计师是为了向公司交差,本 ...

  7. MongoDB和Redis-NoSQL数据库-文档型-内存型

    1NoSQL简述 CAP(Consistency,Availabiity,Partitiontolerance)理论告诉我们,一个分布式系统不可能满足一致性,可用性和分区容错性这三个需求,最多只能同时 ...

  8. Centos7强制卸载Mariadb

    之前安装过Mariadb 10.2.1版本,现在安装10.1.19版本,提示安装成功了,其实是失败的.MariaDB-server 提示已经安装,通过 rpm qa|grep MariaDB 查看 发 ...

  9. 对象的this引用

    Java中的this关键字总是指向调用该方法的对象.根据this出现位置的不同,this作为对象的默认引用有两个功能: 1.构造器中引用该构造器正在初始化的对象. 2.在方法中引用调用该方法的对象. ...

  10. 平凡的KTV后台,不平凡的KTV数据

    之前就是说过“一个项目有很多重要的步骤以及功能”,那我们现在就来看看对于KTV项目来说:后台是处于什么样的重要作用! 首先就得了解KTV后台的一些功能了: 1.歌曲管理 .歌手管理 .设置资源路径 2 ...