javascript - 如何使用javascript更改子元素的字体大小

Question

我有如下的html

<span id="3072" style="position: relative; display: inline-block; width: 1898px; height: 194px; ">
     <div style="visibility: visible; text-align: center; position: absolute; top: 90.5px; width: 1898px;">
         <div style="font-family: Arial; font-size: 8.25pt; font-style: normal;>
         </div>
     </div>
</span>

这里我想将最后一个 div 标签的 font-size:8.25pt 更改为 14pt，如何使用 span 中的 id 访问最后一个 div 标签的内容标签。

我可以很容易地改变第一个 div 标签的内容，如下所示

document.getElementById("3072").firstChild.fontize="14px";

但在这种情况下，Div 标签没有任何类或 Id 来访问它们。

任何人对此有任何想法，请分享。

附上显示 html 代码的图片。

谢谢。

Answer 1

最简单的方法是直接向目标元素添加类或 ID，但如果您无法更改标记，则可以使用:-

使用querySelector

document.querySelector('[id="3072"]>div>div').style['font-size'] = '14px';

<span id="3072" style="position: relative; display: inline-block; width: 1898px; height: 194px; ">
     <div style="visibility: visible; text-align: center; position: absolute; top: 90.5px; width: 1898px;">
         <div style="font-family: Arial; font-size: 8.25pt; font-style: normal;">
           14px
         </div>
     </div>
</span>

或jQuery

$('#3072>div>div').css('font-size', '14px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="3072" style="position: relative; display: inline-block; width: 1898px; height: 194px; ">
  <div style="visibility: visible; text-align: center; position: absolute; top: 90.5px; width: 1898px;">
    <div style="font-family: Arial; font-size: 8.25pt; font-style: normal;">
      14px
    </div>
  </div>
</span>

注意:参见here关于使用数字作为 ID。