js获取内联样式的方法


Posted in Javascript onJanuary 27, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
浅析vue中的nextTick
Dec 28 Vue.js
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
js获取元素外链样式的方法
Jan 27 #Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 #Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 #Javascript
javascript将异步校验表单改写为同步表单
Jan 27 #Javascript
JavaScript中实现sprintf、printf函数
Jan 27 #Javascript
javascript批量修改文件编码格式的方法
Jan 27 #Javascript
JavaScript中的包装对象介绍
Jan 27 #Javascript
You might like
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
对联广告js flash激活
2006/10/19 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
学习ExtJS form布局
2009/10/08 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
详解Go语言中Get/Post请求测试
2022/06/01 Golang
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers