个人中心
gpt4 book ai didi

javascript - style.fontWeight 不工作

转载 作者：太空宇宙 更新时间：2023-11-04 07:24:50 26 4
gpt4 key购买 nike

我试图为用户提供对文本显示的一些控制。我使用 document.getElementsByClassName 来定位父选择器内的所有选择器(具有类 basic-text-frame)。除了 myfunction8(控制 fontWeight)之外，一切都运行顺利当删除它的CSS时有什么想法吗？

function myFunction3() {
  var cols = document.getElementsByClassName("Basic-Text-Frame");

  for (i = 0; i < cols.length; i++) {

    cols[i].style.fontSize = "x-large";

  }
}

function myFunction4() {
  var cols = document.getElementsByClassName("Basic-Text-Frame");

  for (i = 0; i < cols.length; i++) {

    cols[i].style.fontSize = "large";

  }
}

function myFunction5() {
  var cols = document.getElementsByClassName("Basic-Text-Frame");

  for (i = 0; i < cols.length; i++) {

    cols[i].style.fontSize = "16px";

  }
}

function myFunction6() {
  var cols = document.getElementsByClassName("Basic-Text-Frame");

  for (i = 0; i < cols.length; i++) {

    cols[i].style.fontSize = "small";


  }
}

function myFunction7() {
  var cols = document.getElementsByClassName("Basic-Text-Frame");

  for (i = 0; i < cols.length; i++) {

    cols[i].style.fontSize = "x-small";
  }
}

function myFunction8() {
  var cols = document.getElementsByClassName("Basic-Text-Frame");

  for (i = 0; i < cols.length; i++) {

    cols[i].style.fontWeight = "900";
  }
}
.Basic-Text-Frame {
  margin: 10px;
}

p.SubEnglish {
  -epub-ruby-position: over;
  color: #231f20;
  direction: rtl;
  font-family: "WinSoft Pro", sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  text-decoration: none;
  text-indent: 0px;
}

h4.SmallEnglish {
  -epub-ruby-position: over;
  color: #231f20;
  direction: rtl;
  font-family: "WinSoft Pro", sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 30px;
  text-align: justify;
  text-decoration: none;
  text-indent: -16px;
}

h1.Latin {
  -epub-ruby-position: over;
  color: #166827;
  direction: rtl;
  font-family: "WinSoft Pro", serif;
  font-size: 2em;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
  text-decoration: none;
  text-indent: 0px;
}

h2.English {
  -epub-ruby-position: over;
  color: #25408f;
  direction: rtl;
  font-family: "WinSoft Pro", serif;
  font-size: 1.5em;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 30px;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  text-decoration: none;
  text-indent: 0px;
}

h3.Num {
  -epub-ruby-position: over;
  color: #231f20;
  direction: rtl;
  font-family: "WinSoft Pro", sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: justify;
  text-decoration: none;
  text-indent: 0px;
}
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>1-1</title>
  <link href="../../css/Book.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../js/Book.js"></script>
</head>

<body id="x1" xml:lang="en-US">
  <div class="buttons"> <button class="button" onclick="myFunction3()">bigger</button> <button class="button" onclick="myFunction4()">big</button> <button class="button" onclick="myFunction5()">normal</button> <button class="button" onclick="myFunction6()">small</button>
    <button
      class="button" onclick="myFunction7()">smaller</button> <button class="button" onclick="myFunction8()">fontWieght</button> </div>

  <div class="Basic-Text-Frame">

    <p class="SubEnglish">lorem <b>this is bold</b> ipsum lorem ipsum <b> this is also bold </b>ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    <h4 class="SmallEnglish"><b class="char-style-override-4">d.</b> lorem ipsum lorem ipsum lorem ipsum lorem ipsm lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</h4>
    <p class="SubEnglish"><span class="Normal char-style-override-4">lorem ipsum lorem ipsum lorem ipsum lorem im lorem psum lorem ipsum lorem ipsum lorem ipsum.</span></p>
    <h1 id="toc_marker-1" class="Latin"><span class="char-style-override-3">I. </span>lorem ipsum<span class="char-style-override-3"></span></h1>
    <h2 id="toc_marker-1-1" class="English">A. lorem ipsum lorem ipsum lorem ipsum (active pharmaceutical ingredient<span> </span>(API))</h2>
    <h3 class="Num"><b class="char-style-override-4">1.</b> lorem ipsum<b class="char-style-override-4"> This is bold</b> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum.</h3>
    <h2 id="toc_marker-1-3" class="English">C. lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</h2>
  </div>
</body>

</html>

最佳答案

如果你不想改变你的 CSS 结构:

function goDeep(element, cssObj){
  var e = element.getElementsByTagName('*');
  for(var i=0,l=e.length; i<l; i++){
    for(var p in cssObj){
      e[i].style[p] = cssObj[p];
    }
  }
}
function myFunction8() {
  var cols = document.getElementsByClassName('Basic-Text-Frame'), css = {fontWeight:'900'};
  for(var i=0,l=cols.length; i<l; i++){
    goDeep(cols[i], css);
  }
}

关于javascript - style.fontWeight 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49990722/

26 4 0
文章推荐： css - 使用 Styled Components Theme，如何指定设计系统的颜色？
文章推荐： java - 获取excel文件的数据-JSF
文章推荐： c - 为什么 cuda 中的 in-kernel-printf 在显示在显示器上之前将字符串输出到主机？
文章推荐： java - Netty IdleStateHandler 对于大消息超时
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com