JS.elementGetStyle(element, style)应用示例


Posted in Javascript onSeptember 24, 2013

注: 获取Dom元素的Style数组中的指定Style元素

function elementGetStyle(element, style) { 
var value = null; 
if (element.style) { 
value = element.style[style]; 
} 
if (!value) { 
if (document.defaultView && document.defaultView.getComputedStyle) { 
var css = document.defaultView.getComputedStyle(element, null); 
value = css ? css.getPropertyValue(style) : null; 
} else if (element.currentStyle) { 
value = element.currentStyle[style]; 
} 
} 
/** DGF necessary? 
if (window.opera && ['left', 'top', 'right', 'bottom'].include(style)) 
if (Element.getStyle(element, 'position') == 'static') value = 'auto'; */ 

return value == 'auto' ? null : value; 
}

注:选定的Dom元素以color颜色高亮0.2s
function UiWebhighlight(element,color) { 
if (!element) {return} 
var highLightColor = "yellow"; 
if (color) {highLightColor = color} 
if (element.originalColor == undefined) { // avoid picking up highlight 
element.originalColor = elementGetStyle(element, "background-color"); 
} 
elementSetStyle(element, {"backgroundColor" : highLightColor}); 
window.setTimeout(function () { 
try { 
//if element is orphan, probably page of it has already gone, so ignore 
if (!element.parentNode) { 
return; 
} 
elementSetStyle(element, { "backgroundColor": element.originalColor }); 
} catch (e) { } // DGF unhighlighting is very dangerous and low priority 
}, 200); 
}
Javascript 相关文章推荐
jQuery数据显示插件整合实现代码
Oct 24 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
动态加载js文件简单示例
Apr 21 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
详解webpack 多入口配置
Jun 16 Javascript
react redux入门示例
Apr 19 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
jquery $.each()使用探讨
Sep 23 #Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 #Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 #Javascript
JS 实现导航栏悬停效果
Sep 23 #Javascript
jquery购物车实时结算特效实现思路
Sep 23 #Javascript
js下拉菜单语言选项简单实现
Sep 23 #Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 #Javascript
You might like
php 前一天或后一天的日期
2008/06/28 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python的一些用法分享
2012/10/07 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
python中封包建立过程实例
2021/02/18 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
教师找工作推荐信
2013/11/23 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
学生病假条怎么写
2015/08/17 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python