js--获取和设置css属性
在这一章我们讲述一下如何通过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属性的更多相关文章
- js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...
- js原生获取元素的css属性
习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...
- js和jquery设置css样式的几种方法
一.js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
- 关于获取、设置css样式封装的函数入门版
<html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- Android : 反射机制获取或设置系统属性(SystemProperties)【转】
本文转载自:https://blog.csdn.net/wei_lei/article/details/70312512 Android.os.SystemProperties 提供了获取和设置系统属 ...
- 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。
在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...
- jquery操作html元素之( 获取并设置 CSS 类)
jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...
随机推荐
- React-native升级方法
React-native升级方法: 官网升级说明 中文版官网说明 各个版本差异对比
- jquery插件实现瀑布流
jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- python迭代有限制,突破限制
python默认迭代次数为996 需要修改才能迭代超过996 import sys sys.setrecursionlimit() #自定义扩展极限,可以自己改 def fun(n): print(n ...
- [转帖]kubernetes 常见问题整理
kubernetes 常见问题整理 https://www.cnblogs.com/qingfeng2010/p/10642408.html 使用kubectl 命令报错 报错: [root@k8s- ...
- 7. Scala面向对象编程(中级部分)
7.1 包 7.1.1 看一个应用场景 现在有两个程序员共同开发一个项目,程序员xiaoming希望定义一个类取名Dog,程序员xiaohong也想定一个类也叫Dog,两个程序员还为此吵了起来,该怎么 ...
- 封装:WPF绘制曲线视图
原文:封装:WPF绘制曲线视图 一.目的:绘制简单轻量级的曲线视图 二.实现: 1.动画加载曲线 2.点击图例显示隐藏对应曲线 3.绘制标准基准线 4.绘制蒙板显示标准区域 曲线图示例: 心电图示例: ...
- kafka broker Leader -1引起spark Streaming不能消费的故障解决方法
一.问题描述:Kafka生产集群中有一台机器cdh-003由于物理故障原因挂掉了,并且系统起不来了,使得线上的spark Streaming实时任务不能正常消费,重启实时任务都不行.查看kafka t ...
- .Net Core WebAPI开启静态页,设置主页
1.使用场景 默认创建的.Net Core WebAPI应用在运行时是没有页面显示的,效果如下: 那么,如果想要给API设置一个主页,应该怎么做呢?这就需要用到本文提供的方法. 2.设置方法 (1)首 ...
- swiper4基础
这段时间在公司实习做前端,感觉前端没学习到很多前端框架,接口那些都是写好的,只需要调用就好,感觉没什么好记的,唯一觉得有必要记的就是swiper轮播了,在前端做网站的时候经常用到swiper做公告,图 ...
- xshell连接本地linux虚拟机速度很慢的解决办法
今天发现用xshell连接centos太慢,网上查询后发现是因为ssh的服务端在连接时会自动检测dns环境是否一致导致的,修改为不检测即可. 修改文件位置:vi /etc/ssh/sshd_confi ...