style.left不起作用的问题

最近调试程序：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div0 {width: 20px;height: 20px;position: absolute;border-radius: 10px;background: green;left: 50%;}</style></head><body><div id="div0"></div><br/><button id="btn1" οnclick="xx()">一个向左移动的按键<button></body><script type="text/javascript">function xx(){var x = document.getElementById("div0");  var j = x.style.left;  var z = parseInt(j.substr(0,j.length-2));  x.style.left = (z + 20)+"px" ;     }       </script>
<html>

当点击按键时，绿色的小球并不移动。

经调试发现变量j的值为空，也就是无法获取到left的值。不在css中设置left的值，而是在js中进行初始化，程序可以通过。代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div0 {width: 20px;height: 20px;position: absolute;border-radius: 10px;background: green;}</style></head><body><div id="div0"></div><br/><button id="btn1" οnclick="xx()">一个向左移动的按键<[表情]tton></body><script type="text/javascript">var x = document.getElementById("div0");    x.style.left="50%";function xx(){var j = x.style.left;  var z = parseInt(j.substr(0,j.length-2));  x.style.left = (z + 20)+"px" ;     }       </script>
<html>

总结：

left样式必须写在元素内部才能通过div.style.left直接获取属性值（也就是必须是内联样式才行），或者通过js初始化left的值，也可以获取到left属性。定义在css中的left样式不能通过style.left这种方式获取。

style.left不起作用的问题相关推荐

js dom .style.backgroundImage不起作用
document.getElementById("DOM object ID").style.backgroundImage不起作用我想在js代码里根据条件改变对象的背景图片,使 ...
请问为什么像cellspacing=0和bgcolor=red的属性在style里面不起作用呢？
今天在写h5表格的时候遇到了这样的一个问题,给表格设置边框与边框之间的间隙大小cellspacing,将其写在table里面起作用,而写在style里面字体会变暗,不会起作用原因就是,像cellsp ...
vue中style scoped属性的作用和原理以及scoped穿透
一.为什么要给style 节点加 scoped 属性(vue) 1.作用:当style标签里面有scoped属性时,它的css只作用于当前组建的元素.在单页面项目中可以使组件之间互不污染,实现模块化( ...
【Android UI】theme style
背景最近在整一个前辈留下的老代码,里面有个自定义弹窗dialog, 然后自定义了一个Theme,有点看不懂,并且不用这个Theme 整个窗口弹出就出问题了. 回忆theme style 的区别和作用 ...
html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表内嵌样式表:必须写在head标签里例: p { 样式;} he ...
App为了漂亮脸蛋也要美颜，Theme 与 Style 的使用，附一键变装 demo
前言作为 Android 开发者,不知你是否也有这样的体验,随着项目变得越来越大,各种不同圆角的 shape,不同透明度的 color,不同大小的阴影效果,它们使资源文件越来越多我认为造成这种问题 ...
Qt Style Sheet实践（一）：按钮及关联菜单
http://www.cnblogs.com/csuftzzk/p/qss_button_menu.html 导读正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt ...
CSS 学习笔记——CSS Selector
CSS1 中定义的选择器类型选择器用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body {/*对 body 元素定义样式*/ }body,div {/*同时选择多种 ...
前端一HTML:七:css初步认识
css初步认识: 1. css的存放位置:放在title标签下面 2. 所有的样式都放在同一个标签中<style></style> 3. 在style标签中放入对应样式了解c ...

style.left不起作用的问题

style.left不起作用的问题相关推荐

最新文章

热门文章