js获取内联样式的方法

 更新时间:2015年01月27日 11:01:52   投稿:shichen2014  
这篇文章主要介绍了js获取内联样式的方法,针对标准浏览器与IE浏览器进行不同的判断与获取,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js获取内联样式的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>javascript 获取内联样式</title>
</head>

<style>
#box{
width:100px;
height:100px;
background-image:url(1.jpg);
background-size:140% 140%;
background-repeat:no-repeat;
border:20px solid rgba(0,0,0,.3);
background-clip:border-box;
background-position:-20px -20px;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script>
//获取内联样式元素
function getStyle( obj , attr )
{
if ( window.getComputedStyle ) {
return getComputedStyle( obj , null )[attr];
}else{
return obj.currentStyle[attr];
}
}
//获取对象
function $(id){
return document.getElementById(id);
}
var box = $('box');

//打印样式
alert(getStyle(box , 'background-position'));
</script>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • js+canvas实现纸牌游戏

    js+canvas实现纸牌游戏

    这篇文章主要为大家详细介绍了js+canvas实现纸牌游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 微信小程序移动拖拽视图-movable-view实例详解

    微信小程序移动拖拽视图-movable-view实例详解

    这篇文章主要介绍了微信小程序移动拖拽视图-movable-view的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 详解ES6 Promise的生命周期和创建

    详解ES6 Promise的生命周期和创建

    这篇文章主要介绍了详解ES6 Promise Promise的生命周期和创建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 使用JavaScript和CSS实现文本隔行换色的方法

    使用JavaScript和CSS实现文本隔行换色的方法

    这篇文章主要介绍了使用JavaScript和CSS实现文本隔行换色的方法,当然最普通的也可以单纯用CSS实现,需要的朋友可以参考下
    2015-11-11
  • javascript实现禁止复制网页内容

    javascript实现禁止复制网页内容

    这篇文章主要介绍了javascript实现禁止复制网页内容,需要的朋友可以参考下
    2014-12-12
  • JS实现音乐钢琴特效

    JS实现音乐钢琴特效

    这篇文章主要为大家详细介绍了JS实现音乐钢琴特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS 添加网页桌面快捷方式的代码详细整理

    JS 添加网页桌面快捷方式的代码详细整理

    如何添加桌面快捷?很多网友都有这个疑问;JS 点击添加网页桌面快捷方式的代码,需要的朋友可以参考下
    2012-12-12
  • JavaScript 开发规范要求(图文并茂)

    JavaScript 开发规范要求(图文并茂)

    作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。
    2010-06-06
  • Javascript 匿名函数及其代码模式原理

    Javascript 匿名函数及其代码模式原理

    很多同学知道怎么用这种匿名函数,却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数,而并不清楚前面的圆括号具有何种含义!本文将带你了解匿名函数的代码模式原理。
    2010-03-03
  • 实现网页内容水平或垂直滚动的Javascript代码

    实现网页内容水平或垂直滚动的Javascript代码

    用Javascript实现新闻内容的水平或垂直滚动,主要的优点是我们可以实现自定义滚动风格或特效,应用效果比起传统的marquee更加具有特色,方法也比较简单
    2012-10-10

最新评论