jQuery更改锚链接内的跨度宽度和高度

Question

如何修改锚点内的范围的宽度和高度？

a element内有两个跨度，我需要更改第一个跨度的宽度和高度。

示例：

<a href="http://www.google.com" id="myId" >
   <span style="width:18px; height:18px;"></span>
   <span></span>
</a>

Answer 1

您可以将CSS选择器与:first过滤器一起使用。

$("a span:first").css({
      'display':'block',
      'width':'100px',
      'height':'100px'
});

Answer 2

您无法设置内联元素的宽度和高度（或者更确切地说，您可以设置它们但浏览器会忽略它们），因此您需要添加：

display: inline-block;

元素的风格。然后，width和height属性将生效。

演示：http://jsfiddle.net/sH3Eu/2/

你可能想读：

http://quirksmode.org/css/css2/display.html

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 3

你可以使用

$("#myId:first-child").css("width", 100);

请注意，除非您将其从内联更改为块元素，否则不会获得宽度和高度。

Answer 4

我实际上已经解决了这个问题并在所有浏览器中都能正常运行......

$('#myId').find('span:first').css({
    width: "28px",
    height: "28px"
});