`
lmh2072005
  • 浏览: 114231 次
  • 性别: 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
分享到:
评论

相关推荐

    批量输出 CSS background-position 属性的定位像素值

    批量输出`background-position`属性的定位像素值通常是在进行自动化处理或批量优化项目时的需求。这可能是为了统一网站风格,调整多个元素的背景图像位置,或者是在制作响应式设计时确保各个设备上的背景图像位置...

    CSS background-position的使用说明详解

    在本文中,我们将深入探讨`background-position`的工作原理、语法以及各种可能的值。 首先,`background-position`属性的默认值是`0% 0%`,这意味着背景图像将被放置在元素内容区域的左上角,不会受到元素`padding`...

    前端开源库-css-background-video

    在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...

    background-position鱼游动特效.zip

    总结来说,"background-position鱼游动特效"是一个结合了CSS3动画和转换技术的创新应用,它展示了如何利用现代Web技术营造出富有动态感的用户体验。开发者通过精心设计的`animation`和`transform`规则,以及可能的...

    javascript经典特效---INPUT框中的背景图片.rar

    2. **背景图片定位**:`background-position`属性可以控制背景图片在元素内的位置。值可以是像素、百分比或其他相对单位。例如,将图片居中: ```css background-position: center; ``` 3. **背景尺寸调整**:使用...

    背景图片定位

    background-position: x-position y-position; ``` 这里的`x-position`和`y-position`可以是具体的像素值、百分比、关键词(如`center`)等。例如,以下代码将背景图片居中: ```css background-position: center ...

    CSS独立地获取设置和动画背景位置值_JavaScript_下载.zip

    需要注意的是,JavaScript获取的`backgroundPosition`值可能是一个简化的字符串,例如'left top',而不是具体的像素值。如果需要精确的像素值,可能需要转换字符串,例如: ```javascript function ...

    javascript经典特效---特殊分割的图片.rar

    在CSS中,我们可以使用`background-image`属性将背景图片设置到元素上,然后通过`background-position`控制背景图片的位置,实现图片的分割。例如,我们可以创建多个具有相同背景图片但不同背景位置的`div`元素,...

    color-background-源码.rar

    1. **CSS颜色属性**:如`background-color`、`background-image`、`background-repeat`、`background-size`和`background-position`等,用于设置和控制元素的背景。 2. **颜色模式**:RGB、CMYK、HSL和HSV等,了解...

    个人CSS设计兼容性问题总结教程

    需要注意的是,修复PNG透明度问题时,使用`background-position`可能导致点击效果失效,因此应尽量避免这种方法。 接着,我们讨论文本框的兼容性。在IE8及以上版本,文本居中显示是默认的,但在IE6和IE7中,可以...

    css中background-origin属性的使用解析

    `background-origin`与`background-position`属性结合使用,可以实现更精细的背景图像定位。但需要注意的是,如果元素的`background-attachment`属性被设置为`fixed`,`background-origin`属性将不再生效,因为固定...

    CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码.zip

    总结来说,通过CSS3的`background-position`、`background-size`和JavaScript的`mousemove`事件,我们可以轻松实现鼠标移动时背景图片的动态漂移效果。这种技术在创建互动式用户介绍卡片或者其他动态界面元素时非常...

    CSS实现剪裁GIF背景图片动画特效.zip

    例如,可以使用JavaScript或者CSS的`@keyframes`规则来随着时间或事件改变`background-position`。 在CSS3中,`@keyframes`是一个强大的工具,它定义了一个动画的过程,由一系列的关键帧组成。我们可以创建一个动画...

    Full-Screen-Background-Video-master

    全屏背景视频(Full-Screen Background Video)是一种常见的网页设计技术,它允许网站在加载时显示一个占据整个屏幕的视频作为背景,为用户提供沉浸式的视觉体验。"Full-Screen-Background-Video-master" 这个项目很...

    coll.rar_网页背景图片

    总的来说,创建斜向下滚动的背景图片效果需要对CSS和JavaScript有一定的理解,通过巧妙地调整`background-attachment`、`background-position`等属性,并可能结合JavaScript的滚动事件,可以创造出独特的网页视觉...

    javascript经典特效---图片放大镜效果.rar

    接下来,JavaScript将根据计算出的坐标,改变预览区域的背景图片位置(通常使用CSS的`background-position`属性),以显示对应放大区域的图像。为了提供平滑的过渡效果,还可以使用CSS3的`transition`属性或...

    javascript经典特效---文本静止不动.rar

    这样的代码会在用户滚动页面时运行,实时更新文本元素的top值,使其始终保持在屏幕的特定位置。 总的来说,"javascript经典特效---文本静止不动.rar"提供的示例可能是关于如何使用JavaScript和CSS来创建固定定位的...

    CSS控制显示图片的一部分

    通过改变`background-position`或`clip-path`的值,可以创建出平滑的动画效果。 例如,当鼠标悬停在图片上时,显示图片的另一部分: ```css img { transition: background-position 0.5s ease; } img:hover { ...

    纯css实现元素下出现横线动画(background-image)

    总之,通过巧妙利用CSS的`background-image`、`background-position`、`background-size`、`background-repeat`以及`transition`属性,我们可以轻松创建出动态的元素横线动画效果。这种方法不仅简洁高效,而且提供了...

    layui弹出层样式修改,使用css的background属性设置多个背景图附件

    `background`属性的多个值支持在现代浏览器中都表现良好,但老版本的IE浏览器可能不支持。因此,对于这类情况,可以使用`background-image`, `background-repeat`, `background-position`等单独的属性进行逐步增强,...

Global site tag (gtag.js) - Google Analytics