`
lmh2072005
  • 浏览: 111734 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javascript获取background-position的值

阅读更多

获取样式里面的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>

 

 

 

1
1
分享到:
评论

相关推荐

    三星9305收索

    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{...

    postcss-double-position-gradients:在CSS中使用双位置渐变

    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 */ ...

    googlemap 之 javascript实现方法

    这是一个很典型的一个background-position-x的应用。技术含量并不高,但是思想还是值得思考的,证明了DHTML方面有很多东西可以变通的。用背景用map,如果做得更复杂一些,用ajax动态的载入图片的背景,也是一个小型...

    IE6 PNG 透明

    而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat. 这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及&lt;img&gt;. 原理 这个js插件使用了微软的VML语言进行...

    back-to-top-pure-javascript

    #返回顶部-原生javascript##HTML&lt;a&gt;&lt;/a&gt;可以放在页面body中的任何位置##CSSa.back-top{...background-position: center;border-radius: 7px;-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;

    blobject-fit:轻量级,无依赖对象适配的polyfill

    如果值是诸如"top"或"center"类的关键字,则支持object-position ,例如object-position: top right ,通过background-position: YX 。 默认值为center center 。 blobject-fit具有响应能力,只要访问者的浏览器...

    cover:用于调整元素大小的 jQuery 插件,就像`background-size

    不再推荐 考虑使用有填充工具如 用法 var $element = $ ( '.something' ) ; $element .... // Update on resize $ ( window ) .... /* Center it, like `background-position: center` */ position : ab

    tiny-game-client:使用js发送websocket,服务端使用netty接收,编码方式使用protobuf

    使用js发送websocket,服务端使用netty接收,编码方式使用protobuf&lt;style&gt;...@keyframes play02{ 0% { background-position: 0 0; } 100% { background-position: -1600px 0; }}&lt;/style&gt;

    JavaScript源码大全 v1.0(CHM)

    永远居中的背景图片[推荐][共1步][修改图片名称] ====1、将以下代码加入HEML的&lt;body&gt;&lt;/body&gt;之间: ...background-position: center; background-repeat: no-repeat; background-attachment: fixed;} --&gt; &lt;/STYLE&gt;

    cutout:jQuery插件从Sprite Sheet类创建base64图像

    剪下 抠图从CSS精灵表中提取图像。 它将生成的图像作为base64编码的background-image到指定的元素。 这样,您可以使用background-size: cover和background-repeat: repeat以所需的精灵... background-position : -20

    spritemate:雪碧伴侣

    晶状体雪碧伴侣安装$ npm ... background-position: 0 0;}example/icon2over.png{ width: 16px; height: 26px; background-position: 0 -26px;}脚本编写 var mate = require ( 'spritemate' ) ;var images = [ '/pat

    【JavaScript源代码】js实现简单图片拖拽效果.docx

    doctype html&gt;  &lt;html&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; 在当前显示区范围内实现点不到的小方块&lt;/title&gt; &lt;style&gt; div{position:fixed;width:100px;height:100px; background-image:url(images/xiaoxin....

    fe-mentor-profile-card:来自frontendmentor.com的个人资料卡组件挑战

    前端导师-个人资料卡...此处的解决方案是使用background-position background-image设置和定位SVG,并使用具有vw和vh单位的background-position 。这使圆“粘”到了视口的边缘。您可以在“致谢”部分中找到我遇到此解

    android与javascript

    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...

    旋转魔方.html(纯HTML+CSS+JS)

    position:absolute;background-image:url(img/c"+n+".jpg);background-size:300px 300px;"; 需要修改background-image:url(img/c"+n+".jpg);此背景图片信息,改为自己的图片路径就行 ** 注意 **六张图片 需要根据...

    【JavaScript源代码】JavaScript实现返回顶部按钮案例.docx

     本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 思路: 首先先设计出其静态样式,这里主要利用固定定位,将其固定在页面底部的某一位置处 .backtotop { position: ...

    Ticketr-API-SDK:Ticketr API的SDK

    还可以传递“ defaultProperties”,在加载TicketrOperator的徽标时,您必须传递以下属性值“ {'--background-size':'contain','--background-position':'left top'}” ,所有其他用途完全不需要此道具。

    右下角广告弹窗1.html

    部分代码如下: style type="text/css"&gt; * {margin:0px;padding:0px;} ...} body {font-size:14px; line-height:24px;} #tip {position: absolute;...background-color: #...&lt;script type="text/javascript"&gt; var handle;

    Parallax-Scroll:用于背景附件的 jQuery 插件

    它巧妙地使用了background-position和background-size属性而不是 CSS3 转换。 它运行流畅,并保留了 Safari 中的橡皮筋滚动行为。 在移动设备上也能很好地工作。 标记 基本标记由放置在背景持有者之间的内容部分...

    Javascript 手工打造:随意拖动的div层

    包含开始拖动,停止拖动,释放... background-color: #330033; top: 0px; left: 0px; z-index: 200; position: absolute; font-size: 9pt; color: #FFFFFF; padding-top: 5px; padding-left: 5px;"&gt;浮动窗口 实例。&lt;/div&gt;

Global site tag (gtag.js) - Google Analytics