在这一章我们讲述一下如何通过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. Java编程思想之十四 类型信息

    第十四章 类型信息 运行时类型信息使得你可以在程序运行时发现和使用类型信息 14.1 为什么需要RTTI 面向对象编程中基本的目的是:让代码只操作对基类的引用. 多态: import java.uti ...

  2. [记录]UserControl 的一个值得注意的问题 [属性" * "的代码生成失败.错误是:"程序集"*.Version=1.0.0.0,Culture=neutral,..........无标记为序列化"

    开发时在做UserControl,需要注意的List<>集合问题~~~! 其他类型的集合可能也存在这样的问题,但是我没去测试,在写集合的时候一般List<>用的多点,所以经常碰 ...

  3. Django 模板语言 for循环

    Django 模板语言 for 循环 ******  for 循环字典 ********** USER_DICT = { 'k1':'root1', 'k2':'root2', 'k3':'root3 ...

  4. pandas 学习 第十一篇:处理缺失值

    Pandas中的缺失值是指nan.None和NaT.如果需要把inf 和 -inf视为缺失值,需要设置 pandas的选项: pandas.options.mode.use_inf_as_na = T ...

  5. SAP SD 信用检查相关

    SAP系统信用管理功能的介绍:    R/3系统具有强大的信用管理功能.系统可将来自于FI.SD的财务及销售信息进行汇总, 提供即时的信用数据;并可依据信用政策对订单及发货进行管理,有效地降低风险;并 ...

  6. React 根据条件自动计算

    1.输入框 <Item {...formItemProps} label="留房日期"> {getFieldDecorator('date', { rules: [{ ...

  7. Tigase XMPP Server

    Tigase XMPP Server是我们的旗舰服务器端软件,提供XMPP服务或实例通信(IC)服务.最基本的解释是Tigase是一个聊天服务器,但它远不止于此.聊天是其可能的应用程序之一,但任何类型 ...

  8. 无法打开内核设备:\\Global\\vmx86

    关于如题目的问题,网上有好几个解决办法,这里只介绍最方便的一个办法,利用脚本来解决 @Echo Off title Hankcs's program color 8F CD %~d0 CD %~dp0 ...

  9. Go的运算符

    1 算术运算符 运算符 术语 示例 结果 + 加 10 + 5 15 - 减 10 - 5 5 * 乘 10 * 5 50 / 除 10 / 5 2 % 取模(取余) 10 % 3 1 ++ 后自增, ...

  10. kylin安装过程问题排查

    问题:日志报错:/usr/local/apps/kylin/tomcat/conf/.keystore (没有那个文件或目录) 解决:在kylin内置tomcat的server.xml中里边有个对ht ...