DOM手术台

DOM手术台

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

CSS分类

       排队: 

<div id="box"  style="width:200px;border:1px solid red  color:red;font-size:16px;"></div>

       内联:在HTML的头部一般为例如以下格式

<styletype=”text/css”>  
       div.test{    
                     background-color:red;    
                     height:10px;
                     width:10px; margin:10px;
               }
</style>

       链接:在HTML中引入一个单独的CSS文件。格式例如以下

<linkrel="stylesheet" type="text/css"href="xx.css"/>

首先总体的看一下JS对CSS的操作

DOM手术台

JS能够对行内样式进行获取和设置

       在HTML中每一个元素都有一个属性对象style,该对象包括了该元素的全部的css样式。这样的CSS样式称为内嵌样式,例如以下

<div id="box"  style="width:200px;border:1px solid red  color:red;font-size:16px;"></div>
       var box = document.getElementById('box');//获得id为box的元素节点
       alert(box.style);                 //CSSStyleDeclaration对象
       alert(box.style.color);              //red
       alert(box.style.width);

注意:在CSS中假设出现类型font-size的属性在JS中把-号去掉,后面的字符大写,写成alert(box.style.fontSize);

利用JS的style能够获得全部设置过的属性值。

也能够设置属性值。

  

       box.style.color=green;//将颜色改为绿色
       box.style.height=12px;//也能够设置没有的属性

DOM2级还为style定义了一些属性和方法    

       removeProperty(name)——移除指定的属性
       setProperty(name,value,position)——给指定的属性设置值

可是通过style仅仅可以获得行内的css样式,假设使用内联或链接的则无法获得。在非IE中可以使用getComputedStyle()在IE中使用currentStyle()属性。这两个方法仅仅可以获得。

JS对内联及链接样式进行获取和设置

       对这两种样式的操作时是通过CSSStyleSheet对象进行.对该对象的获取有两种方式

方法一:先获得元素,然后获得该对象

在IE中通过sheet属性获得。在非IE中通过styleSheet获得。

var link = document.getElementsByTagName('link')[0];//通过标签面获得全部的链接的css样式然后去第一个var sheet = link.sheet || link.styleSheet;//通过sheet或styleSheet获CSSStyleSheet对象

方法二

通过doucument中的styleSheets直接获得。返回的是个数值,它兼容全部的浏览器。

       var sheet=document.styleSheets[0];

       CSSStyleSheet有一些属性和方法能够操作外联的样式,经常使用的“增”和“删”,可是IE和非IE是不兼容的,所以须要自己写函数进行兼容。假设要“改”CSS中的样式则能够使用CSSRules,对CSS文件里的某一条规则进行改动。

小结

       CSS一共三种样式。DOM操作能够分为两个大类。行内的使用style可读可写,内联和链接的使用getComputedStyle或currentStyle仅仅能读。假设使用CSSStyleSheet对象下的CSSRules对象则能够对指定的CSS规则进行读和写。

 

版权声明:本文博主原创文章,博客,未经同意不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116994.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • path是什么意思啊_on the path

    path是什么意思啊_on the path投影投影是JMESPath的关键特性之一。它允许您将表达式应用于元素集合。有五种投影:列表投影切片投影对象投影展平投影过滤投影处理投影需要注意的点投影分为两个步骤。左侧(LHS)创建一

  • 海康威视摄像头不支持的码流类型_v380pro摄像头怎么连接无线网

    海康威视摄像头不支持的码流类型_v380pro摄像头怎么连接无线网前言:对于HIS视频采集、输出和编解码,直接使用海思SDK中的sample代码+NVP6124就可以实现,这里有提供HIMPP开发文档、海思sample源码和NVP6124的驱动代码,可以自行去下载;HIMPP开发文档:https://download.csdn.net/download/u012478275/11573292海思sample源码:…

  • foc无刷电机位置控制(直流无刷电机接线图解)

    序:矢量控制的核心思想是为了简化无刷电机的控制模型,将一个需要换相的无刷电机通过各种算法变换,抽象为一个直流电机的控制模型,只需要控制简单的两个直流分量来控制无刷电机,其中Vq抽象为直流电机的两端电压,Vd可调节电机力矩,但这个模型需要一个实时的电机轴角度θ参与计算。为了实现这个直流电机的控制模型,需要用到两个数学变换,即clarke变换和park变换。需要用到最原始的PID控制器等内容。…

  • TortoiseSVN菜单项功能说明

    TortoiseSVN菜单项功能说明

  • Linux 查看内存使用情况

    Linux 查看内存使用情况

  • 基于STC89C51/2的的超声波测距(1602A显示)「建议收藏」

    基于STC89C51/2的的超声波测距(1602A显示)「建议收藏」基于STC89C51/2的的超声波测距(1602A显示) 楼主在做学校单片机设计的时候为了测试超声波模块的功能与精度,动手DIY一款能用的超声波测距仪器,用1602液晶显示屏动态显示,精度在0.5cm左右,粗略测距,可用于避障,检测距离等的实际用途中。 我的超声波模块使用的是HC-SR04,板子使用的是STC89C52RC学习版(理论上51和52均可使 用)。得到距离之后可用于扩展功能,之后有空可以把我的经验分享出来,欢迎讨论。我的引脚接口如下ECHO=P2^4;

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号