【零碎】js获取宽高和font-size大小以及样式表的其他值

如果写在 样式表 里面, 用stylewidth拿不到宽度, 但是通过 elementoffsetWidth 可以获取宽度

写在行内的就可以直接用stylewidth来获取

需要注意的是宽高在设定padding的时候是不同的:

对于普通元素一般第二个参数设置为null就可以了

此方法适用于通用样式表获取样式值

javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要使用如下兼容性代码

HTMLElementprototype__defineGetter__("currentStyle", function () { 

    return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

接下来就可以直接使用currentStyle属性来获取元素的样式了，下面实例演示获取页面body的背景色：

1、HTML结构

<input type='button' value='点击按钮获取页面背景色' onclick="fun()"/>

2、CSS样式

body{background: RGB(222,222,2);}

3、javascript代码

HTMLElementprototype__defineGetter__("currentStyle", function () { 

return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

function fun(){

var color = documentbodycurrentStylebackgroundColor;

alert(color);

}

4、效果演示

语法：元素style样式名=样式值

注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的，比如 background-color 。需要将这种样式名修改为驼峰命名法：去掉-，然后将-后的第一个字母大写，比如 backgroundColor

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

所以尽量不要为样式添加!important

语法：元素style样式名

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

语法:元素currentStyle样式名

如果当前元素没有设置该样式，则获取它的默认值

例如： box1currentStylewidth

这个方法是window的方法，可以直接使用需要两个参数

第一个:要获取样式的元素

第二个:可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象﹒样式名来读取样式

如果获取的 样式没有设置 ，则会获取到真实的值，而不是默认值

比如:没有设置width，它不会获取到auto，而是 一个长度

注意：通过currentStyle和getComputedstyle()读取到的样式都是只读的，不能修改,如果要修改必须通过style属性

参数：

obj 要获取样式的元素

name 要获取的样式名

<span id="span">

<span style="color: rgb(229, 51, 51);">2132131321</span>

</span>

var span = documentgetElementById("span")innerHTML;

jquery:

var span = $("#span")html();

扩展资料

<p><span>some text</span>some other text</p>

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。

<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性，<span> 标签支持HTML 的全局属性和事件属性。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

参考资料：

百度百科 span标签

百度百科 HTML

（1）domstylewidth/height 获取dom元素内联样式中设定的width，height

（2）domcurrentStylewidth/height 获取dom元素渲染后的width，height，只支持IE

（3）windowgetComputedStyle(dom)width/height 浏览器渲染后的元素宽,兼容性更好

（4）domgetBoundingClientRect()width/height/left/top/right/ 计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、right、bottom、width、height

ElementgetBoundingClientRect() - Web API 接口参考 | MDN

在鸿蒙中，可以通过使用JavaScript来改变样式style。首先，可以使用JavaScript获取元素的style属性，然后用新的style属性替换原来的style属性，从而改变样式。其次，也可以使用JavaScript获取元素的class属性，然后添加新的class属性，从而改变样式。最后，也可以使用JavaScript来添加style属性，从而改变元素的样式。通过以上三种方式，可以轻松实现在鸿蒙中使用JavaScript来改变样式style。

原型是用DOM的style属性方法：

Elementstyle[styleDOMName] = "value";

Element：指定元素，用documentcreateElement / documentgetElement获取元素obj

或者使用setAttribute方法：

ElementsetAttribute('style','css代码');//会覆盖所有的原来在这个标签上style属性赋的值

ElementsetAttribute('style',ElementgetAttribute('style') + "")//不会覆盖

要么把这个写在head标签里：

<script type="text/javascript">

windowonload=function(){

var getID = documentgetElementById("over");

getIDonmouseover=function(){

thisclassName = "over";

}

}

</script>

要么就在<div id="over"> 1 </div>后写上

<script>

var getID = documentgetElementById("over");

getIDonmouseover=function(){

thisclassName = "over";

}

</script>

需要在html加载完毕后js才能正确获取到元素

以上就是关于【零碎】js获取宽高和font-size大小以及样式表的其他值全部的内容，包括:【零碎】js获取宽高和font-size大小以及样式表的其他值、js 如何获取背景色的值、JS修改CSS设置的样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！