jquery怎么读取div的样式

一、选取DOM元素

jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

var $ = documentquerySelectorAllbind(document);

这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。

二、DOM *** 作

DOM本身就具有很丰富的 *** 作方法，可以取代jQuery提供的 *** 作方法。

尾部追加DOM元素。

// jQuery写法

$(parent)append($(child));

// DOM写法

parentappendChild(child)

头部插入DOM元素。

// jQuery写法

$(parent)prepend($(child));

// DOM写法

parentinsertBefore(child, parentchildNodes[0])

删除DOM元素。

// jQuery写法

$(child)remove()

// DOM写法

childparentNoderemoveChild(child)

用 $("#XXX")css("width":"100%");

注：css()方法可以直接对单个的css属性进行 *** 作，比如 *** 作某个对象的style里面的高度属性，$("#X")css("height":"50%");

另外css()方法中的参数还可以接受map，比如:

css({"width":"30%","height":"20%"});

给这个div加一个id，然后用$('#你写的id')text()或者$('#你写的id')html()，后者如果div中有html代码可以得到这个div中的html，但text得不到，如果是表单控件直接可以用$('#那个控件id')val()来获取

思路：在页面设计时就将指定的样式设置为一个class，然后应用到需要的元素上。那么此时可以通过类选择器来获取使用指定样式的个数

$("some_class")length;  // 获取应用了some_class的元素的个数

实例演示：本例将红色设置为一个类 red，并应用到不同的元素中去，然后可以通过上述方法获取应用的个数

创建Html元素

<div class="box">

<span class="red">点击按钮获取应用了红色样式的元素的个数：</span><br>

<div class="content">

    <table>

        <tr><td>1</td><td>2</td><td>3</td></tr>

        <tr><td>4</td><td class="red">5</td><td>6</td></tr>

        <tr><td>7</td><td>8</td><td>9</td></tr>

    </table>

    <ul>

  <li>Glen</li>

  <li class="red">Tane</li>

  <li>John</li>

  <li class="red">Ralph</li>

</ul>

</div>

<input type="button" value="获取应用了红色样式的元素的个数">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

table{border-collapse:collapse;}

td{width:30px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

li{margin:5px;list-style: none;}

red{color:red !important;}

编写jquery代码

$(function(){ 

$("input:button")click(function() {

alert($("red")length);

});

});

观察效果

以上就是关于jquery怎么读取div的样式全部的内容，包括:jquery怎么读取div的样式、jquery *** 作css里面的style，如何 *** 作里面单独的某一项、JQuery 如何获得这个div中的值<DIV style="TEXT-ALIGN: center; WIDTH: 60px">sdfsdfds</DIV></TD>等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！