js获取style的值，js获取style属性值

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如何用JS攻取img中的style中的width和height值?

1、var img = document.getElementById(imgId)；var rect = img.getBoundingClientRect()；alert(rect.width+，+rect.height) //实际显示的高度和宽度，不管是通过css或width属性设置的。alert(img.naturalWidth+，+img.naturalHeight)；//图片的原始高度和宽度，不过旧的浏览器可能不支持。

2、js获取浏览器的宽度和高度，这里只获取可视范围内的宽度和高度。然后将取出的值赋给图片即可。代码如下。

3、界面中有一个img，但是没有用js来设置它的宽度高度和背景颜色。接着使用jQuery获取到所要设置的div，并且调用css（）方法即可开始设置了。在css方法即可设置，注意，里面有花括号哦，并且属性用双引号引起来。同时设定多个属性，则要用逗号隔开，这样即可多个属性生效。

相关问答

Q1: 原生js获取元素的样式style属性值

用jquery可以很轻松的取到了，比如：div id=divTest style=height：100px/div 只需要：(div#divTest).css(height)；就可以取到height的值了。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。

js获取Html元素的实际宽度高度第一种情况就是宽高都写在样式表里，就比如#div1{width：120px；}。这中情况通过#divstyle.width拿不到宽度，而通过#divoffsetWidth才可以获取到宽度。第二种情况就是宽和高是写在行内中，比如style=width：120px；，这中情况通过上述2个方法都能拿到宽度。

var img = document.getElementById(imgId)；var rect = img.getBoundingClientRect()；alert(rect.width+，+rect.height) //实际显示的高度和宽度，不管是通过css或width属性设置的。alert(img.naturalWidth+，+img.naturalHeight)；//图片的原始高度和宽度，不过旧的浏览器可能不支持。

Javascript获取页面的元素的样式常见的两个方法是 document.getElementById()， document.querySelector()；方法。2 在下面的实例中是使用Javascript来改变标签的背景颜色，使用的是document.querySelector()方法。

Q2: js中关于获取元素属性的方法(object.style.width)

1、js获取Html元素的实际宽度高度第一种情况就是宽高都写在样式表里，就比如#div1{width：120px；}。这中情况通过#divstyle.width拿不到宽度，而通过#divoffsetWidth才可以获取到宽度。第二种情况就是宽和高是写在行内中，比如style=width：120px；，这中情况通过上述2个方法都能拿到宽度。

2、currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。

3、getElementsByTagName返回一个数组，即使整个文档里只有一个元素，也返回一个数组。示例：显示信息都是object，getElementByClassName也返回一个具有相同类名的元素数组，获取和设置属性getAttribute object.getAttribute(attribute)。注：getAttribute方法不属于document对象，它只能通过元素节点对象调用。

Q3: js获取元素样式ele.style.attribute只能获取内敛样式的属性值!内部样式...

1、是这样的，一开始需要获取某一个元素的 left 值，我就用 ele.style.left 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。好吧，追本溯源，问题的根源以及区别就在这里了。所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。

2、id属性就像一个挂钩，它一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式。document.getElementById(purchases)这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的的id属性值为purchases。其实，文档中的每个元素都是一个对象。

3、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象，只读，此方法支持Firefox浏览器；语法：var style=window.getComputedStyle(“元素”，“伪类”)；第一个参数是必须的，第二个为可选的。

Q4: 急!怎么用js提取出span标签内style里的属性值

1、内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

2、给span起个id，然后用$(#span的id).text()，如果想获得html代码，把text换成html就可以了，前端学习交流。

4、那么元素将按照 ASCII 字符顺序进行升序排列。比较函数必须返回下列值之一：负值，如果所传递的第一个参数比第二个参数小。零，如果两个参数相等。

5、--通过class获取span，然后通过text()获取span里的内容注：html()返回或设置被选元素的内容 (inner HTML)；text()获取设置或返回被选元素的文本内容有的时候无法取得值时，是因为html是从上往下解析的，在解析到js里的$(#spId)时，下面这个span还不存在，当然就取不到了。

6、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。在index.html中的script标签，输入js代码：$(body).append($(.name-price span).eq(0).find(b).text())；。浏览器运行index.html页面，此时通过jQuery取到了书名“数值分析”并打印了出来。

Q5: 使用js对div的style属性进行动态赋值问题,

首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。在index.html中的script标签，输入js代码：$(#div2).height($(#div1).height())；。浏览器运行index.html页面，此时div2的高度被设置成和div1一致了。

var image=new Image()；image.src=//你的背景图片的src；var divelement = document.getElementById(你的div的id)；divelement.style.height=(image.height*divelement.offsetWidth)/image.width + px；几个需要注意的地方是image.src=xxx后需要等待直到图片下载完成。

/div 因为是动态数据，所以#div1的高度是auto，无法获取到具体值。var div1=document.getElementById(div1)；alert(divstyle.height)；//没有值建议从css上改进。比如给中间的div设置css {height：500px；overflow：auto；}这样就能固定高度，多出的内容用滚动条显示。

js获取style的值的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js获取style属性值、js获取style的值的信息别忘了在本站进行查找喔。