js 操作css
类似于jquery的css()函数,js封装
CSS函数:css(oDiv , “width” , “200px ”)设置样式
css(oDiv , “width”)获取样式
JS:
Function css(){
If(arguments.length==2){
Return arguments[0].style[arguments[1]]; //获取样式
}else{
Arguments[0].style[arguments[1]] = arguments[2]; //设置样式
}
}
或是
Function css(obj,name,vaule){
If(arguments.length==2){
Return obj.style[name]; //获取样式
}else{
obj.style[name] = vaule; //设置样式
}
}
调用:
Window.onload= function(){
Var oDiv = document.getElementById(“div1”);
css(oDiv , “width” , “200px ”);
css(oDiv , “background” , “blue ”);
}
but:
Obj.style: 只能操作行间样式
兼容IE和高版本chrome操作非行间样式:obj.currentStyle
兼容chrome,FF,IE9操作非行间样式:obj.getComputedStyle(oDiv , null )
If(oDIv .currentStyle){
oDiv.currentStyle.width = “”;
}else{
getComputedStyle(oDiv,false).width= “”;
}
js 操作css的更多相关文章
- JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...
- js操作css样式,null和undefined的区别?
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- 通过JS操作CSS
动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- JS操作CSS随机改变网页背景
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...
- JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
- js操作css变量
原文:http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html :ro ...
随机推荐
- 02 sublime text3下配置Python的编译运行环境
内容参考如下文章,加入了自己的干货: https://www.cnblogs.com/huluwahaha/p/7503930.html 在sublime中如何配置Python的编译环境呢? 打开Su ...
- 用React 中的useState改变值不重新渲染的问题
不渲染 const [lists,setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根据删除index下标 ...
- 如何win7安装tomcat
首先安装jdk,查看当前jdk版本. >java -version 显示的是1.8.0_131 为此我们安装的tomcat版本是apache-tomcat-9.0.38-windows-x64. ...
- 详解工程师不可不会的LRU缓存淘汰算法
大家好,欢迎大家来到算法数据结构专题,今天我们和大家聊一个非常常用的算法,叫做LRU. LRU的英文全称是Least Recently Used,也即最不经常使用.我们看着好像挺迷糊的,其实这个含义要 ...
- nullptr解决了什么问题
从0到NULL 在C++的世界中字面值0用来表示空指针,所以0可以当作所有指针类型的字面值.为了让语义更明确引入了NULL宏定义: #undef NULL #ifdef __cplusplus #de ...
- Java9第四篇-Reactive Stream API响应式编程
我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...
- 【思维】UVA 11300 Spreading the Wealth
题目大意 vjudge链接 有n个人围圆桌而坐,每个人有Ai个金币,每个人可以给左右相邻的人一些金币. 若使得最终所有人金币数相等,求最小金币转移数. 数据范围 n<1000001 样例输入 3 ...
- centos8平台使用lsof
一,lsof的用途 lsof,List Open Files 列出当前系统打开文件的工具. 在linux环境下,任何事物都以文件的形式存在, 所以lsof通过文件不仅仅可以访问常规数据,还可以访问网络 ...
- ABAP分享十: 文件的上传 方法一
前提条件:PARAMETERS P_files TYPE RLGRAP-FILENAME. AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_files.一.文件的 ...
- Linux基础命令之getent
getent命令简述 getent - get entries(entry的复数,条目.项目.记载.记录) getent命令可以用来察看系统的数据库中的相关记录 经常使用getent查看用户账号: 之 ...