DOM访问元素样式和操作元素样式
在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对象还有下列属性和方法。
- cssText:访问到style特性中的css代码
- length:应用的css属性数量
- parentRule:表示css信息的CSSRule对象。
- getPropertyCSSValue(propertyName):范湖包含给定属性值得CSSValue对象。
- getPropertyPriority(propertyName):如果给定的属性使用了!important设置,则返回”important“;否则,返回空字符串。
- getPropertyValue(propertyName):返回给定属性的字符串值。
- item(index):返回给定位置的css属性名称。
- removeProperty(propertyName):从样式中删除指定属性。
- setProperty(propertyName,value,priority):将给定属性设置相应的值,并加上优先权标志(“important”或一个空字符串)
虽然style对象能够提供支持style特性的任何元素的样式信息,但不包括另外两种样式表层叠来并影响当前元素的样式信息
document.defaultView.getComputedStyle(元素,伪元素字符串);如果不需要伪元素则为null.返回的是一个CSSStyleDeclaration对象包含元素计算后的样式(含默认样式)。IE不支持
#mydiv{ border: 2px blue solid; }
也可以获取到该元素的其他css属性,但返回的内容跟浏览器相关。可以测试一下。
DOM访问元素样式和操作元素样式的更多相关文章
- document--文档中的操作,操作属性、操作样式、操作元素
---恢复内容开始--- document操作: 1.找元素 getE.. 2.操作内容 非表单:innerHtml 表单:value 3.操作属性 ...
- Web自动化 - 选择操作元素 1
文章转自 白月黑羽教Python 所有的 UI (用户界面)操作 的自动化,都需要选择界面元素. 选择界面元素就是:先让程序能找到你要操作的界面元素. 先找到元素,才能操作元素. 选择元素的方法 程序 ...
- 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- DOM中操作结点的属性_操作元素结点的样式
有俩种方式操作结点的属性. 首先我们需要先获取所要操作的结点元素: var uname=document.getElementById("uname"); var gan=unam ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
随机推荐
- 进击的Python【第十七章】:jQuery的基本应用
进击的Python[第十七章]:jQuery的基本应用
- jquery函数理解与运用
javascript中有多种不用的方式去理解函数,函数类似于我们以前学过的数学函数,但是在程序设计中,我是按照下面的方式进行理解: 函数的理解: 函数是一个代码块,内容被包含在函数内,通常我们是把一些 ...
- 【转】SSL协议、SET协议、HTTPS简介
一.SSL协议简介 SSL是Secure Socket Layer的缩写,中文名为安全套接层协议层.使用该协议后,您提交的所有数据会首先加密后,再提交到网易邮箱,从而可以有效防止黑客盗取您的用户名.密 ...
- 【转】《从入门到精通云服务器》第四讲—DDOS攻击
上周咱们深入分析了云服务器的配置问题,好了,现在手上有了云服务器之后,我们又不得不提它:DDOS攻击.这是所有运维者的心头痛,也是任何公司听闻后都将心惊胆战的强大对手.下面我们将用浅显易懂的方式讲述什 ...
- 软件工程:黄金G点小游戏1.0
我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...
- bug: 在缓存行高时,总是记录错误.
一,现象: 1.在 cell 中添加了一个 label, 并对 label 设置了 attributeText, 结果滑动的过程中,cell 的高度总是不对,多次出现下一个 cell 覆盖上一个 ce ...
- 基础2.Jquery过滤选择器
1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...
- Master-Slave通用基础框架
一.设计目的 设计出一个通用的Master-Slave基础框架,然后可以基于这个框架来实现特定的业务需求,比如实现多节点并行计算.分布式处理等. 二.设计理念 基于经典的命令模式,Master和Sla ...
- Android :fragment介绍
一.关于Fragmemt 1.Fragment(片段),主要是为了支持更多的动态和灵活的用户界面设计,如平板电脑.Fragment允许组合和交换用户界面组件,而不需要更改视图层次结构.通过把Activ ...
- PHPExcel按单元格读取数据
import('ORG.Util.PHPExcel.PHPExcel'); $objReader = new PHPExcel_Reader_Excel2007(); //use excel2007 ...