JS 之设置元素样式的改变,可以利用样式框架
如果已经将某个元素的样式设定好了,又想改变,可以利用样式框架:
function setStyle(obj,attr,value){
obj.style[attr]=value;//注意此处attr的写法,点用中括号代替
}
然后就可以调用该函数对样式进行改写了,但是这样的话,想改变多个运算样式的时候,需要调用多次这个函数,若不想多次调用函数,该怎么办呢?
这时可以利用json,
function setStyle(obj,json){
var attr='';
for(attr in json){
obj,style[attr]=json[attr];
}
}
window.onload=function(){
var oDiv=doucment.getElementsByTagName('div')[0];
setStyle(oDiv,{width:200px,height:200px,background:yellow});//注意大括号内用逗号分隔
}
JS 之设置元素样式的改变,可以利用样式框架的更多相关文章
- js中设置元素class的三种方法小结
一.el.setAttribute('class','abc'); 代码如下: .abc { background: red; } test div var div = document.getEl ...
- JS如何设置元素样式的方法示例
<div id="box"></div> <script> var box = document.getElementById("bo ...
- FineReport——JS二次开发(CSS改变控件样式)
FR提供一些选择器,可以改变部分控件的样式,那么对于如何书写自己的css: 可以自己写css文件导入,也可以在页面加载结束事件中添加JS方法来改变css样式. 以文本框为例: 书写css文件,保存至% ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- js动态设置padding-top遇到的坑
我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...
- js学习进阶-元素获取及样式设置
var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...
- 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */
昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...
- jQuery使用之(二)设置元素的样式
css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...
- js设置元素不能编辑
js设置元素不能编辑 $("#startLocation").attr("readOnly",true); js设置元素可以编辑 $("#startL ...
随机推荐
- sublime text3 用法
1. 使用lint进行语法及风格校验 jshint可以统一编码风格. 安装jshint的步骤: 1)ctrl+shift+p打开命令模式--->输入pcip回车--->输入sublimel ...
- SQL总结之对比和备份
-----用户解锁select * from wfuser for update ----------------------修改金额select * from bp_account where ac ...
- Atom编辑器之加快React开发的插件汇总
汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全 autocomplete-js- ...
- redis整合spring
最近公司项目有用到 所以找了一下实例.感觉很清晰. 完整项目路径http://www.cnblogs.com/dennisit/p/3614521.html看了一下应该没问题
- F9 开发之左树右表中的左树
1 首先在前端应用树树控件 <div class="fui-left"> <div role="head" title="地区选择& ...
- 圆形图片CustomShapeImageView
第三方控件 [GitHub的源码下载] (https://github.com/MostafaGazar/CustomShapeImageView) 1:依赖包 dependencies { ... ...
- 手工杀毒辅助软件(PC Hunter) V1.51 免费绿色版
软件名称: 手工杀毒辅助软件(PC Hunter) 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 4.7MB 图片预览: 软件简介: PC Hunter是 ...
- Memory Limits for Windows and Windows Server Releases
来源:https://msdn.microsoft.com/en-us/library/windows/desktop/aa366778(v=vs.85).aspx Limits on memory ...
- 【Python之路】第三篇--Python基本数据类型
运算符 1.算数运算: # 在py2的 取整除运算中 9//2 = 4.0 # 引入 from __future__ import division 9//2 = 4.5 # py3中不需要! 2.比 ...
- vs2010帮助文档下载以及帮助查看器(H3Viewer)的使用
在工作中遇到想查看vs2010的帮助文档.推荐使用H3Viewer.一个第三方的免费软件,独立于VS2010运行的帮助查看器.这方面的资料并不多.把本次自己使用的心得分享给大家. H3Viewer官方 ...