JS中设置backgroun-position不成功的问题

原创 2015年11月18日 15:18:06

今天在做个人主页的时候,准备把background-position设置一下,可是用了很多种方法都没有能够成功,最后才发现了问题,在这里记录一下,如果可以,也很开心能够和你分享我的经验。


原生javascript:

  在原生的js中,大家都理解的是要想设置对象的css属性,可以使用 Element.style.Attribute的方法做到,但是今天在使用的时候却出了一些问题,用这种方法读出来的background-position属性,就算用控制台显示了但是却并不能应用,只相当于一个单纯的字符串,并没有被浏览器所接受,识别。所以浏览器中调试时,在元素的属性栏中根本没有background-position的属性出现(甚至连一道删除线都没有划)。


Jquery框架:

     Jquery中集成了很多易用方法,对于页面设计比较常用的就要属CSS方法了,这个方法所需要的参数是以键值对的形式出现的,比如{"margin-left":"-100px","top":"500px"},这样的表达让人很容易对其进行设置。每一个属性对应的名字和CSS中使用的值是完全相同的(在这一点上,与原生JS有些不同,如js中的style.marginLeft,在css中就是margin-left),所以background-position-x理应就是用来设置背景在x轴线上的位置的,但是!我并么有成功!


记住设置background-position的时候,一定要用css中的background-position属性直接设置两个值,用background-position-x分别设置是不会成功的,同时使用原生js的.style.backgroundPositionX方法设置也是不会成功的!通往成功的路只有一条!!

微信小程序中的position问题

如果同时将一个position不为static的容器内的多个块position设置为absolute,开发者工具和安卓端会正常表现,即从容器左上角开始算起,依据设置的top,right,bottom,...
  • WickedDogg
  • WickedDogg
  • 2017年04月21日 10:34
  • 2583

position之absolute定位深入理解

和float是兄弟在我们写样式的时候会发现使用float和absolute的时候,会发现都会出现高度塌陷的问题,和脱离文档流的情况,而且你如果设置了的话就会表现出类似于display:inline-b...
  • sufubo
  • sufubo
  • 2016年03月12日 00:26
  • 2049

关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法

项目中有个需求时在页面的最下面有一排按钮,这排按钮需要固定到页面的最下面,不能随着屏幕的滚动为滚动。 问题: 功能是使用css的position:fixed; bottom:0;属性设置的。 单独...
  • MarkAsh
  • MarkAsh
  • 2016年09月22日 10:34
  • 4238

J2EE for SpringMVC 映射静态资源独Js不成功的问题解决

刚才博主遇到一个很头大的问题,静态资源映射了,路径语法啥的都没问题而css和img又能够映射成功,能够正常读取,经过反复检查,博主发现是版本跟不上了。看看博主的配置先:...
  • tydyz
  • tydyz
  • 2017年08月08日 18:53
  • 204

使用ajaxupload.js插件上传图片不成功问题----RTFSC

一、项目中使用ajaxupload.js插件上传图片,返回值不正确 对不起,系统故障,您访问的页面暂时无法访问!      返回的是error404.jsp页面 二,看web.xml中配置 ...
  • honghailiang888
  • honghailiang888
  • 2016年05月24日 09:21
  • 886

往GitHub上传东西,试了各种方法都不成功,可能是Email设置的问题

前几天,花了好长时间想要把代码发布到GitHub,试了好多办法都没有成功。一开始尝试在VS客户端上,后来用GitHub的客户端,最后又采用Tortoisegit工具,一直是失败的,而且感觉不可思议。因...
  • Stephen___Qin
  • Stephen___Qin
  • 2017年06月27日 18:43
  • 190

mysql部署到linux赋权问题(修改数据库密码不成功)

  • 2017年12月18日 20:01
  • 427KB
  • 下载

XP操作系统解决IIS安装不成功问题

  • 2014年05月22日 10:55
  • 781KB
  • 下载

解决POI3.10 添加图片不成功的问题

  • 2015年12月21日 19:45
  • 13.09MB
  • 下载

asp.net 自跟踪实体模板 解决删除实体后保存不成功的问题

  • 2010年12月27日 17:04
  • 68KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS中设置backgroun-position不成功的问题
举报原因:
原因补充:

(最多只允许输入30个字)