Question

如何在课堂

中获取属性width

<div class="one" >
  <img src="1.png" class="two">
<div>
    <div class="three" >
   <img src="2.png" class="two">
<div>

我希望使用类1.png和类one获取第二类属性two。

Answer 1

Javascript有一个名为document的全局对象。您不需要JQuery来使用其querySelector函数。

该对象有一个名为querySelector的方法。如果您将querySelector作为一个函数调用，并传入要查找的类，并在.句点的前面，它会为您找到这些元素。

选择这些元素后，您可以通过使用所需属性的参数调用getAttribute方法来获取该属性。

document.querySelector('.one .two').getAttribute('src')

More information on the queryselector can be found here

Answer 2

尝试像这样的jquery 为您编辑的问题

var getAttribute = $(".one .two").attr("src");
 alert(getAttribute);

参见演示

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<div class="one" >
	  <img src="1.png" class="two">
	</div>
</body>

<script type="text/javascript">
	var s = $(".one .two").attr("src");
	alert(s);
</script>
</html>

Answer 3

您可以使用Document.querySelector()将选择器作为包含一个或多个由逗号分隔的CSS选择器的字符串传递，在本例中为.one > .two，这意味着：

选择一个元素类.two的元素，该元素具有类.one的元素。

var elm = document.querySelector('.one > .two').getAttribute('src');
console.log(elm);

<div class="one" >
  <img src="1.png" class="two">
<div>
    <div class="three" >
   <img src="2.png" class="two">
<div>

如何通过类选择器获取width属性？

3 个答案: