更改 HTML 按钮的标题答案

【问题标题】：Change Title of a HTML button更改 HTML 按钮的标题
【发布时间】：2013-09-01 10:50:15
【问题描述】：

我想在单击后更改 HTML 按钮的标题。这就是我尝试过的。

HTML

<button class="fullScreen" data-dojo-type="dijit.form.Button" onclick="FullScreenToggle(this);" id="butFullScreen">
<input type="image" class="ns" onclick="FullScreenToggle(this);" title="Full Screen" value="" />

JS

if (document.getElementById("butFullScreen").title == "Full Screen") {
    document.getElementById("butFullScreen").title = "";
    document.getElementById("butFullScreen").title = "Normal Screen";
} else document.getElementById("butFullScreen").title = "Full Screen";

当我这样做时，JavaScript 调用中的标题不会改变。然后我尝试在 HTML 中使用title=""，然后在 Java Script 调用中更改标题。但是当第一次加载按钮时我没有标题。我希望在加载按钮时将全屏作为标题，然后在每次单击时在普通屏幕和全屏之间切换。

欢迎提出建议，在此先感谢。

更新

简单的问题是，一旦我在 HTML 中设置了 title="Full Screen"，java-script 调用就不会改变它。我有什么解决方案或理由吗？

已解决

将title="" 保留为空白，并在<body onload 方法中调用java 脚本方法。问题解决了。

【问题讨论】：

旁注：此 HTML sn-p 无效，因为您没有关闭 <button> 标记。虽然浏览器旨在修复无效的 HTML，但不能保证所有浏览器都会应用相同的修复。生成 100% 有效的 HTML 可以省去一些麻烦。

标签： javascript html htmlbutton

【解决方案1】：

你需要在网站上调用一个函数页面加载完成后执行 JavaScript：

在 HTML 中：

<body onload="FullScreenToggle();">

在 JavaScript 中：

window.onload=function(){FullScreenToggle();};

【讨论】：

从这里得到了这个想法，它奏效了。非常感谢。

【解决方案2】：

试试这个在按钮点击：

 var butn=document.getElementById("butFullScreen").value;
 if(butn=="Full Screen")
     document.getElementById("butFullScreen").value="Normal Screen";
 if(butn=="Normal Screen")
     document.getElementById("butFullScreen").value="Full Screen";

【讨论】：

感谢您的回答，但不幸的是，这对我不起作用。我在 HTML 代码中设置了 title="Full Screen"。它不会在 Java Script 调用中改变。实际上我想更改标题（标题可以作为工具提示），而不是值。
按钮的title属性是tooltip，而不是显示的文字。

【解决方案3】：

给你的按钮标题：

function FullScreenToggle(){
 if (document.getElementById("butFullScreen").title == "Full Screen"){
    document.getElementById("butFullScreen").title = "Normal Screen";
 } else {
    document.getElementById("butFullScreen").title = "Full Screen";
 }

【讨论】：

试过了，但没有运气：/

【解决方案4】：

试试这个

if (document.getElementById("butFullScreen").getAttribute('title')=="Full Screen"){ 
   document.getElementById("butFullScreen").setAttribute('title',"Normal text");
    }
else
   document.getElementById("butFullScreen").setAttribute('title',"Full Screen");

【讨论】：

感谢您的回答，但不幸的是，这对我不起作用。我在 HTML 代码中设置了 title="Full Screen"。它不会在 Java Script 调用中改变:(
好吧，一旦我在 HTML 中设置了 title="Full Screen"，java-script 调用就不会改变它。我有什么解决方案或理由吗？

【解决方案5】：

我的偏好是只打 1 个document.getElementById 电话，要求清洁和易于维护。另外，我会直接使用.title 属性。

function FullScreenToggle() {
    var button = document.getElementById("butFullScreen");
    if (button.title == "Full Screen") {
        button.title = "Normal Screen";
    } else {
        button.title = "Full Screen";
    }
}

【讨论】：