javascript 当用户单击按钮时如何使用 js 更改 css 类中的显示属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16915882/
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
How to change the display property in a css class using js when user clicks a button
提问by Tony Babb
I'm building a webapp that I plan on converting to a smartphone app using Phone Gap Build. I've never done this before so may not be describing my problem clearly but here goes. I started using the jquery mobile sample in Dreamweaver, this has multiple pages in a single html file. What I'd like to do is have a series of English phrases on each page, each English phrase will be followed by the formal Spanish translation and then the informal Spanish translation. At the top of the page the user will have three buttons saying "Formal", "Informal" and "Formal & Informal". The user will always see the English phrases followed by the Formal, Informal or Formal & Informal Spanish depending on which buttons they pressed/ tapped.
我正在构建一个网络应用程序，我计划使用 Phone Gap Build 将其转换为智能手机应用程序。我以前从未这样做过，所以可能没有清楚地描述我的问题，但在这里。我开始在 Dreamweaver 中使用 jquery mobile 示例，它在单个 html 文件中有多个页面。我想做的是在每一页上都有一系列英语短语，每个英语短语后面都会有正式的西班牙语翻译，然后是非正式的西班牙语翻译。在页面顶部，用户将有三个按钮，分别是“正式”、“非正式”和“正式与非正式”。根据他们按下/点击的按钮，用户将始终看到英语短语，然后是正式、非正式或正式和非正式的西班牙语。
The home page can be seen here http://www.pslt.biz/mobileApp/LE4/index3.htmlthen click "Age, Weight & Height" and you'll see that clicking the Formal/ Informal buttons has no effect on the Spanish underneath the first phrase "How old are you". If it helps here's the Formal button which should set the CSS class ".formal" to Display:Block and the ".informal" class to Display:None
主页可以在这里看到http://www.pslt.biz/mobileApp/LE4/index3.html然后点击“年龄、体重和身高”，你会看到点击正式/非正式按钮对第一个短语“你多大了”下面的西班牙语。如果有帮助，这里是 Formal 按钮，它应该将 CSS 类“.formal”设置为 Display:Block，将“.informal”类设置为 Display:None
<a href="#" onclick="document.getElementById('formal').style.display='block';document.getElementById('informal').style.display='none';">Display Formal</a>
The CSS classes are defined externally as follows:
CSS 类在外部定义如下：
.formal { display:block;
}
.informal {display:block;
}
And the Spanish phrases are defined in divs as follows:
西班牙语短语在 div 中的定义如下：
<div class="formal"> <!-- Start Formal -->
<div style="float:left">
<a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
<img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
</div>
<div style="float:left">
Cuántos a?os tiene?
</div>
</div> <!-- End Formal -->
<div class="informal"> <!-- Start informal -->
<div style="clear:left">
<div style="float:left">
<a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
<img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
</div>
<div>
Cuántos a?os tienes?
</div>
</div>
</div> <!-- End informal -->
If anyone could point me in the right direction I'd really appreciate it, I thought it would be simple to do but I must be missing something blindingly obvious.
如果有人能指出我正确的方向，我会非常感激，我认为这很简单，但我一定错过了一些非常明显的东西。
回答by Groonel
Use getElementsByClassName()instead of getElementById().
使用getElementsByClassName()代替getElementById()。
You have selector by class name, not by idOr replace class="informal"and class="formal"with id="informa1"etc.
您可以通过类名有选择，而不是由ID或更换class="informal"，并class="formal"用id="informa1"等。
回答by Mifeet
You can use jQuery:
您可以使用 jQuery：
<a href="#"
onclick="$('.formal').css('display', 'block'); $('.informal').css('display', 'none');">Display Formal</a>
The problem is your divs have classes "formal" and "informal", not ids and you are selecting by ID.
问题是您的 div 具有“正式”和“非正式”类，而不是 id，并且您是按 ID 选择的。
Another option:
另外一个选择：
<a href="#" onclick="$('.formal').show();$('.informal').hide()">Display Formal</a>
回答by Tony Babb
The solution from MiFeet worked perfectly. I used Display Formal
MiFeet 的解决方案运行良好。我使用了正式展示
For some reason I was unable to show that as the answer, I received an error when I clicked on the checkbox, I hope this helps someone else.
出于某种原因，我无法将其显示为答案，当我单击复选框时收到一个错误，我希望这对其他人有所帮助。
Tony Babb
托尼巴布
回答by Muhammad Saqlain Arif
if you have class="informal"then replace it with class="informal1"and try this
如果你有class="informal"那么替换它class="informal1"并尝试这个
<a href="#" onclick="change();" id="remove" class="informal">Display Formal</a>
function change(){
$('#remove').removeClass('informal');
$("#remove").addClass("informal1");
}
回答by Ziyaddin Sadigov
JS code:
JS代码：
button.onclick=function(){
element=document.getElementsByClassName("formal")[0];
element.className="informal";
}
