JavaScript与jQuery获取非行间样式的方法

样式分类与获取需求

CSS样式主要分为行间样式和非行间样式两类。行间样式通常仅作用于单个元素，使用场景相对较少；而非行间样式的作用范围更广，可应用于具有相同标签名或相同类名的多个元素（注：ID属性具有唯一性，通常不重复使用）。

在实际开发中，经常需要获取元素的特定样式属性，例如宽度（width）或高度（height）。本文将探讨在JavaScript和jQuery环境下如何准确获取这些非行间样式值。

JavaScript获取非行间样式

首先介绍原生JavaScript的实现方式。

1. 获取行间样式：

无论通过书籍学习还是日常实践，获取行间样式的方法较为直观，即通过元素的style对象进行访问。

这种直接访问style属性的方式，仅能读取或修改直接定义在元素标签内的行间样式，无法获取CSS文件或<style>标签中定义的非行间样式。

2. 获取非行间样式：

此处直接提供封装好的辅助函数代码，不再赘述编辑与运行过程。

function getStyle(obj,attr)
{
    if(obj.currentStyle)
　　   {
        return obj.currentStyle[attr];
      }
    else
     return getComputedStyle(obj,null)[attr];//放null参数的那个地方放false也可以，只要带一个参数，值您任意，高兴就好。
 }

完成上述简单函数的封装后，在需要获取非行间元素样式时调用该函数即可（例如：调用getStyle(oDiv, 'width')）。

jQuery获取非行间样式

接下来介绍jQuery环境下的实现方式。

起初可能认为jQuery需要像原生JS那样封装函数，但实际上jQuery提供了更简便的方法，直接使用内置API即可解决。

首先可以使用jQuery中的width()和height()方法。这两个方法返回的是包含内容区域宽高的数值类型（number）。需要注意的是，outerWidth()和outerHeight()方法则用于获取包含内边距（padding）和边框（border）的完整盒子模型尺寸。

另一种获取非行间样式的方法是使用css()方法。与width/height不同，css()方法返回的数据类型为字符串（string），适用于获取各种CSS属性值。

以上内容涵盖了在JS和jQuery中获取非行间样式的主要方法。

希望本文的内容能对您的学习或工作有所帮助，欢迎继续支持本站！