获取样式里面的background-position
function getStyle(ele){
return ele.currentStyle || document.defaultView.getComputedStyle(ele,null);
//或者 return ele.currentStyle || window.getComputedStyle(ele,null);
}
console.log(getStyle(ele.backgroundPosition.split(" ")[0]);
ie下log的值是undefined,其它的浏览器正确返回x坐标的值。
不知道ie是怎么处理的。
后来试了下获取内联的样式里面的值都可以
一:background-position写在dom元素里面。
<style type="text/css">
#stop{ background:url(bg.jpg) no-repeat; width:200px; height:200px;}
</style>
<script language='javascript'>
var dd_x=document.getElementById("stop").style.backgroundPosition.split(" ")[0];
var dd_y=document.getElementById("stop").style.backgroundPosition.split(" ")[1];
alert(dd_x+","dd_y);
</script>
<div id="stop" style="background-position:1px 1px;"></div>
二:页面加载时用js设置
<style type="text/css">
#stop{ background:url(bg.jpg) no-repeat; width:200px; height:200px;}
</style>
<script language="javascript" type="text/javascript">
$(function(){
$("#stop").css("background-position","10px 10px");
//$("#stop")[0].style.backgroundPosition="10px 10px";
dd_x=$("#stop")[0].style.backgroundPosition.split(" ")[0];
dd_y=$("#stop")[0].style.backgroundPosition.split(" ")[1];
alert(dd_x+","dd_y);
})
</script>
<div id="stop"></div>
分享到:
相关推荐
cursor:pointer}.s_btn_h{background-position:-240px -48px}.s_btn_wr{width:97px;height:34px;display:inline-block;background-position:-120px-48px;*position:relative;z-index:0;vertical-align:top}#lk{...
background-image : linear-gradient ( 90 deg , black 25 P % , blue 50 u % ); } .conic-gradient { background-image : conic-gradient (yellowgreen 40 % , gold 0 deg 75 % , #f06 0 deg ); } /* becomes */ ...
这是一个很典型的一个background-position-x的应用。技术含量并不高,但是思想还是值得思考的,证明了DHTML方面有很多东西可以变通的。用背景用map,如果做得更复杂一些,用ajax动态的载入图片的背景,也是一个小型...
而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat. 这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>. 原理 这个js插件使用了微软的VML语言进行...
#返回顶部-原生javascript##HTML<a></a>可以放在页面body中的任何位置##CSSa.back-top{...background-position: center;border-radius: 7px;-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;
如果值是诸如"top"或"center"类的关键字,则支持object-position ,例如object-position: top right ,通过background-position: YX 。 默认值为center center 。 blobject-fit具有响应能力,只要访问者的浏览器...
不再推荐 考虑使用有填充工具如 用法 var $element = $ ( '.something' ) ; $element .... // Update on resize $ ( window ) .... /* Center it, like `background-position: center` */ position : ab
使用js发送websocket,服务端使用netty接收,编码方式使用protobuf<style>...@keyframes play02{ 0% { background-position: 0 0; } 100% { background-position: -1600px 0; }}</style>
永远居中的背景图片[推荐][共1步][修改图片名称] ====1、将以下代码加入HEML的<body></body>之间: ...background-position: center; background-repeat: no-repeat; background-attachment: fixed;} --> </STYLE>
剪下 抠图从CSS精灵表中提取图像。 它将生成的图像作为base64编码的background-image到指定的元素。 这样,您可以使用background-size: cover和background-repeat: repeat以所需的精灵... background-position : -20
晶状体雪碧伴侣安装$ npm ... background-position: 0 0;}example/icon2over.png{ width: 16px; height: 26px; background-position: 0 -26px;}脚本编写 var mate = require ( 'spritemate' ) ;var images = [ '/pat
doctype html> <html> <head> <meta charset="UTF-8"> 在当前显示区范围内实现点不到的小方块</title> <style> div{position:fixed;width:100px;height:100px; background-image:url(images/xiaoxin....
前端导师-个人资料卡...此处的解决方案是使用background-position background-image设置和定位SVG,并使用具有vw和vh单位的background-position 。这使圆“粘”到了视口的边缘。您可以在“致谢”部分中找到我遇到此解
position:relative; padding:5px; background-color:#000; width:300px; height:300px; overflow:hidden; } div.box div.item{ float:left; width:90px; height:90px; background-color:#ccc; margin:5...
position:absolute;background-image:url(img/c"+n+".jpg);background-size:300px 300px;"; 需要修改background-image:url(img/c"+n+".jpg);此背景图片信息,改为自己的图片路径就行 ** 注意 **六张图片 需要根据...
本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 思路: 首先先设计出其静态样式,这里主要利用固定定位,将其固定在页面底部的某一位置处 .backtotop { position: ...
还可以传递“ defaultProperties”,在加载TicketrOperator的徽标时,您必须传递以下属性值“ {'--background-size':'contain','--background-position':'left top'}” ,所有其他用途完全不需要此道具。
部分代码如下: style type="text/css"> * {margin:0px;padding:0px;} ...} body {font-size:14px; line-height:24px;} #tip {position: absolute;...background-color: #...<script type="text/javascript"> var handle;
它巧妙地使用了background-position和background-size属性而不是 CSS3 转换。 它运行流畅,并保留了 Safari 中的橡皮筋滚动行为。 在移动设备上也能很好地工作。 标记 基本标记由放置在背景持有者之间的内容部分...
包含开始拖动,停止拖动,释放... background-color: #330033; top: 0px; left: 0px; z-index: 200; position: absolute; font-size: 9pt; color: #FFFFFF; padding-top: 5px; padding-left: 5px;">浮动窗口 实例。</div>