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 ...
随机推荐
- c++中CString:: Find , ReverseFind, Left, Right
CString 是在MFC中的头文件 非MFC加上afx.h头文件 直接上代码: // ConsoleApplication1.cpp : Defines the entry point for th ...
- 【题解】NOIP2018 旅行
题目戳我 \(\text{Solution:}\) 首先题目描述有一点不准确:回头是必须要走完一条路无路可走的时候才能返回. 对于树的情况:显然贪心做就完事了. 对于基环树的情况:对于一个\(n\)条 ...
- Android高级控件(下)
计时器(Chronometer) getBase() 基准时间 setFormat() 设置显示格式 start() 开始计时 stop() 停止计时 setOnChronometerListener ...
- 达梦产品技术支持-DM8-数据库安装
(该文档只适合个人环境搭建,未涉及到数据库的各种参数配置,未涉及到数据库规划,若需要企业环境搭建请咨询专业人员) 基于Windows的安装 windows下安装是图形化界面,与linux下的图形化界面 ...
- (九) SpringBoot起飞之路-整合/集成Swagger 2 And 3
兴趣的朋友可以去了解一下其他几篇,你的赞就是对我最大的支持,感谢大家! (一) SpringBoot起飞之路-HelloWorld (二) SpringBoot起飞之路-入门原理分析 (三) Spri ...
- shell-脚本的执行
1. shell脚本的执行 当shell脚本以非交互的方式运行时,它会先查找环境变量ENV,该变量指定了一个环境文件(通常是.bashrc),然后从该环境变量文件开始执行,当读取了ENV文件后,she ...
- CSP-S2020AFO记
2020-10.11 考初赛辣. 选择题考了一堆时间复杂度,一个不会(卒) 我寻思这01背包哪里能用贪心? 啊,这,这,这手写快排竟如此简单,手写取Max,手写队列,两个字符串颠来倒去,竟活到爆! 震 ...
- Vue.js 学习笔记之五:编译 vue 组件
正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...
- 第三章 虚拟机的简单使用及其xshell远程工具的使用
一.虚拟机的快照 1.虚拟机的几种状态: 开机状态 === 运行状态 关机状态 挂起状态 === 虚拟机不关机,但是你使用不了 定身术 快照就是虚拟机的某种状态 === 月光宝盒 2.快照分类: 开机 ...
- 基于risc-v架构cpu
一.定义: CPU ,全称为中央处理器单元,简称为处理器,是一个不算年轻的概念 早在 20 世纪60 年代便己诞生了第一款 CPU请注意区分"处理器"和"处理器核& ...