Question

我有一个带有h3标签的div，当我选中一个复选框时，我想要加粗文字。我见过带标签的解决方案，但我不相信它适用于我的情况。这是代码：

HTML：

<div class="imagecontainer">
  <div id="imagewrap" class="wrap">
    <img src="../images/travel.gif" id="img_prev" width="450" height="450" />
    <h3 class="desc">"Perfection is not attainable, but if we chase perfection we can catch excellence."</h3>
  </div>
</div>

<input id="boldCheckbox" type="checkbox" class="boldCheckbox"/>
<label id="label1">Bold</label>

要清楚，我希望class="desc"的h3文本在检查时加粗。谢谢！

Answer 1

您需要输入的更改处理程序：

document.getElementById("boldCheckbox").onchange = function() {
    var h3 = document.getElementsByClassName("desc")[0];
    if (this.checked) {
        h3.style.fontWeight = "bold";
    } else {
        h3.style.fontWeight = "normal";
    }
}

演示：http://jsfiddle.net/jvk3qpvp/1/

Answer 2

var btnBold = document.getElementById("boldCheckbox"),
    title   = document.querySelector("#imagewrap h3");

btnBold.addEventListener("change", function(){
   title.style.fontWeight = this.checked ? "bold" : "normal";
});

<强> jsBin demo

Answer 3

如果你可以使用jQuery ......这是一个非常简单的例子：

$('#boldCheckbox').on('change', function() {
  $('#imagewrap h3').css({fontWeight: this.checked?'bold':'normal'});
});

h3 { font-weight : normal}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imagecontainer">
  <div id="imagewrap" class="wrap">
    <h3 class="desc">"Perfection is not attainable, but if we chase perfection we can catch excellence."</h3>
  </div>
</div>

<input id="boldCheckbox" type="checkbox" class="boldCheckbox" />
<label id="label1">Bold</label>

逻辑上，如果您的h3默认情况下已经粗体，则只需反转逻辑：

this.checked? 'normal' : 'bold'

Answer 4

您可以使用JavaScript查看复选框，如果选中它，请将其设为粗体（字体粗细700），不要将其设为粗体。请记住，以下代码将在页面加载时显示h3粗体。我不确定你想怎么处理它。

$('#boldCheckbox').on('change', function () {
    if ($('#boldCheckbox').is(":checked")) {
        $('h3').css('font-weight', '700');
    }
    else {
        $('h3').css('font-weight', '100');
    }
});

https://jsfiddle.net/kuwu6kog/

Answer 5

100％工作

使用此代码制作H3 BOLDER

HTML

<div class="imagecontainer">
          <div id="imagewrap" class="wrap">
              <img src="icons/frontstreet.png" id="img_prev" width="450" height="450" />
              <h3 class="desc">"Perfection is not attainable, but if we chase perfection we can catch excellence."</h3>
          </div>
      </div>

      <input id="boldCheckbox" onclick="makeH3Bold(this)" type="checkbox" class="boldCheckbox"/>

JAVASCRIPT：

function makeH3Bold(o){
if(o.checked){
    $('.desc').css('textShadow','#000000 1px 0px 0px');
}
else{
    $('.desc').css('textShadow','#FFFFFF 0px 0px 0px');
}}

Answer 6

您可以在标记中添加粗体样式的其他类。试试这个：

document.getElementById("boldCheckbox").onchange = function() {
    var imageWrap = document.getElementById("imagewrap");
    var h3 = imageWrap.getElementsByTagName("h3")[0];
    if (this.checked) {
        h3.className = "desc selectedH3";
    } else {
        h3.className = "desc";
    }
}

selectedH3可能就像：

.selectedH3 {
    font-weight: bold;
}

这会在您的selectedH3代码中添加或删除课程h3。

复选框检查上的粗体文字

6 个答案: