javascript 按下按钮“加粗”并再次按下“取消加粗”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9528466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Press button to "Bold" & press again to "Unbold"
提问by Noumi
I am new to javascript. I want to make a button in html using javascript. When user try to press the button the specific <#id> is going to be "Bold" and press again to "Unbold".
我是 javascript 新手。我想使用 javascript 在 html 中制作一个按钮。当用户尝试按下按钮时，特定的 <#id> 将变为“粗体”，然后再次按下以“取消粗体”。
How can I do this ? please refer any helping material. Thanks !
我怎样才能做到这一点 ？请参考任何帮助材料。谢谢 ！
采纳答案by Purag
Since the learning experience is vital, especially for Javascript, I'll guide you in the right direction.
由于学习经验至关重要，尤其是对于 Javascript，我将指导您朝着正确的方向前进。
First, you should look into event bindingand mouse event handlingwith jQuery. You can do some powerful stuff with this knowledge, including what you would like to do.
首先，您应该使用 jQuery研究事件绑定和鼠标事件处理。你可以用这些知识做一些强大的事情，包括你想做的事情。
Second, look into basic jQuery selectors. It's not hard to learn the simple CSS-based selectors that you can use to select your desired id.
其次，查看基本的 jQuery选择器。学习简单的基于 CSS 的选择器并不难，你可以用它来选择你想要的id.
Third, look at the css()function of jQuery, which falls under jQuery's CSScategory. You can use this to set different properties of elements, including font weight.
回答by Starx
I am guessing, you are trying to build something like RTE, So, applying class to give bold effect would be better and efficient solution to this.
我猜，您正在尝试构建诸如 RTE 之类的东西，因此，应用类来提供大胆的效果将是更好、更有效的解决方案。
It can be done as simple as this
它可以像这样简单地完成
$(".boldtrigger").click(function() { //boldTrigger being the element initiating the trigger
$(".text").toggleClass("bold"); //text being the element to where applied to it.
});
CSS
CSS
.bold { font-weight: bold; }
Demo
演示
回答by Joseph
here's another question that uses the .toggleClass for a vice versa effect. you need to create a class for that certain element since it adds and switches classes back and forth.
这是另一个问题，它使用 .toggleClass 来实现反之亦然。您需要为该特定元素创建一个类，因为它来回添加和切换类。
Using JQuery to toggle between styles
for a one way change:
一种方式改变：
$('button_selector').on('click',function(){
$('item_to_bold_selector').css('font-weight','bold');
});
references for this:
对此的参考：
回答by Christian Mann
JQuery's toggle()method should take care of this.
JQuery 的toggle()方法应该解决这个问题。
$('#foo').toggle(function() {
$('#bar').css('font-weight', 'bold');
}, function() {
$('#bar').css('font-weight', 'auto');
});
When you click #foo, it will do the next function in sequence, so this is exactly what you want.
当您点击 时#foo，它会依次执行下一个功能，所以这正是您想要的。
回答by mini
here is the code to bold & unbold text
这是加粗和取消加粗文本的代码
<div id="contentDiv">
content of the page.
</div>
<input type="button" value="Bold" id="font-button"></input>?
jQuery("#font-button").on("click",function(){
var button = $(this);
var contentDiv= $("#contentDiv");
if(button.val() == "Bold"){
contentDiv.css("font-weight","bold");
button.val("UnBold");
}else{
contentDiv.css("font-weight","normal");
button.val("Bold");
}
});?
回答by Justice Erolin
$('button_selector').on('click',function(){
var itemToBold = $('item_to_bold_selector');
if (itemToBold.css('font-weight') == 'bold') {
$('item_to_bold_selector').css('font-weight','normal');
} else {
$('item_to_bold_selector').css('font-weight','bold');
}
});
Based off of Joseph's answer, but with the unclick criteria.
基于约瑟夫的回答，但有取消点击标准。
回答by Don Zacharias
I like using toggleClass()(API reference)
我喜欢使用toggleClass()（API 参考）
$("#button").click(function(){
$("#element").toggleClass("bold");
});
If it has ".bold" when clicked it will unbold and vice versa.
如果单击时它有“.bold”，它将取消加粗，反之亦然。
回答by user1200650
Since you tagged this post with jQuery I assume you are looking for a jQuery approach.
由于您使用 jQuery 标记了这篇文章，因此我假设您正在寻找一种 jQuery 方法。
If you want to use a CSS class to add the bold style, I recommend you look at using toggleClass: http://api.jquery.com/toggleClass/
如果你想使用 CSS 类来添加粗体样式，我建议你看看使用 toggleClass：http: //api.jquery.com/toggleClass/
Lots of samples on that page...
该页面上有很多示例...
