在这一章我们讲述一下如何通过js来操作css中的属性

1,首先,我们想获取元素的一些属性。例如innerHTML,value等值时,我们可以

var object=document.getELementById(id);

var  aa=object.innerHTML或者var bb=object.value;

此外对于这些属性的设置,我们也可以直接设置

object.innerHTML="###"

object.value="####"

2,对于width,height,background-color,等等其他的属性我们可以通过以下的方法设置他的值

Object.style.property="###";

有人说,我们可不可以通过var aa=Object.style.property;来获取某个属性值啊?

回答是不可以的,上述方式无法获得属性值。

对于这些属性的获取就很复杂了,我们要考虑浏览器兼容问题(我们在这里封装成一个函数,其中node就是我们要改变属性值的那个元素,property对应是的就是要改变得属性)

function getStyle(node, property){

if (node.style[property]) {
return node.style[property];
}
else if (node.currentStyle) {
return node.currentStyle[property]; }else if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(node, null)[property];
}
return null;
}

js--获取和设置css属性的更多相关文章

  1. js 获取和设置css3 属性值的实现方法

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...

  2. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  3. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  4. 如何用javascript获取和设置css3属性

    ==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...

  5. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  6. 关于获取、设置css样式封装的函数入门版

    <html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...

  7. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  8. Android : 反射机制获取或设置系统属性(SystemProperties)【转】

    本文转载自:https://blog.csdn.net/wei_lei/article/details/70312512 Android.os.SystemProperties 提供了获取和设置系统属 ...

  9. 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。

    在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...

  10. jquery操作html元素之( 获取并设置 CSS 类)

    jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...

随机推荐

  1. 【操作系统之九】Linux常用命令之netstat

    一.概念netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP ...

  2. 【p6spy学习之一】p6spy使用

    一.介绍 p6spy是一个开源项目,通常使用它来跟踪数据库操作,查看程序运行过程中执行的sql语句.1.原理 p6spy将应用的数据源给劫持了,应用操作数据库其实在调用p6spy的数据源,p6spy劫 ...

  3. java 执行 shell脚本通过mysql load data导入数据

    1:load_data_test.sh #!/bin/sh load_data_log=/mnt/load_data_test/load.log load_sql="LOAD DATA LO ...

  4. Python【每日一问】29

    问: [基础题]:给一个不多于 5 位的正整数,要求:一.求它是几位数,二.逆序印出各位数字[提高题]:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加 ...

  5. 【题解】保安站岗[P2458]皇宫看守[LOJ10157][SDOI2006]

    [题解]保安站岗[P2458]皇宫看守[LOJ10157][SDOI2006] 传送门:皇宫看守\([LOJ10157]\) 保安站岗 \([P2458]\) \([SDOI2006]\) [题目描述 ...

  6. 『线段树及扫描线算法 Atlantis』

    入门看这边『线段树 Segment Tree』. 扫描线 扫描线是一种解决一类平面内统计问题的算法,通常会借助线段树来实现,我们通过一道例题来引入这个算法. Atlantis Description ...

  7. Java学习:数组的使用和注意事项

    数组 数组的概念:是一种容器,可以同时存放多个数据值 数组的特点: 数组是一种引用数据类型 数组当中的多个数据,类型必须统一 数组的长度在程序运行期间不可以改变 数组的初始化:在内存当中创建一个数组, ...

  8. Logstash配置文件修改自动加载和指定目录进行启动

    检查配置并启动Logstash,修改后自动加载 指定配置文件目录并启动Logstash

  9. HTML+CSS综合练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. HashMap源码原理

    HashMap源码解析(负载因子,树化策略,内部hash实现,resize策略) 内部属性: 负载因子: final float loadFactor(默认为0.75f) 实际容量: int thre ...