大胆/不透明按钮

我目前正在使用在线文本编辑器作为项目的一部分，并且至少可以说，我在使用粗体按钮时遇到了一个小问题。大胆/不透明按钮

这是我在HTML按钮：

<button id="b" onclick="bold()">Bold</button>

这里是我的JavaScript函数：

function bold() { 
     var ban = document.getElementById("b"); 

     if (ban == true) { 
     document.getElementById("texto").style.fontWeight = 'bold'; 
     } else { 
     document.getElementById("texto").style.fontWeight = 'normal'; 
     } 
    }

如果我带走一切，只是把它作为：

 function bold() { 
     document.getElementById("texto").style.fontWeight = 'bold'; 
    }

它使我的文字变粗体，但是我的目标是能够在我的<textarea>内展开文字，当我再次点击该按钮。

我在做什么错？

来源

2016-11-12 DonKain

你看到了什么，当你通过代码在调试器步骤？ – 2016-11-12 05:24:39

-2

function Bold() 
 
{ 
 
    
 
    var ban =document.getElementById("texto").style.fontWeight ; 
 
    
 
if(ban == 'normal') 
 
    { 
 
     document.getElementById("texto").style.fontWeight = 'bold'; 
 
    } 
 
else 
 
    { 
 
     document.getElementById("texto").style.fontWeight = 'normal'; 
 
    } 
 
}

<button id="b" onclick="Bold()">Bold</button> 
 

 
<p id="texto" style="font-weight:normal;">Hi</p>

来源

2016-11-12 05:11:20 prasanth

'Element.style'属性无法读取所有浏览器。糟糕的技术。 – PHPglue

@PHPglue http://www.w3schools.com/jsref/prop_style_fontweight.asp查看页面。所有主要浏览器都支持 – prasanth

他们还声称，您也可以像这样获得'Element.style.width'，但它在某些浏览器上不起作用的现实土地。请参阅获取样式信息[此处]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#Getting_style_information）。 w3schools可以提供帮助，但并不总是完全可靠。虽然我承认这种技术可能适用于许多新的浏览器，但我仍然不推荐它。 – PHPglue

试试这个：

function Bold() 
{ 
    var text = document.getElementById("texto"); 
    var weight = text.style.fontWeight; 
    if(weight == 'bold') 
    { 
     text.style.fontWeight = 'normal'; 

    } 
    else 
    { 
     text.style.fontWeight = 'bold'; 
    } 
}

来源

2016-11-12 04:59:31 Derek

使用外部JavaScript，所以它的缓存，更快的加载时间，因为你要你的HTML从JavaScript作为最佳实践分开。但是真的，你的问题是每次你的函数被调用时你都在重新定义你的var ban。观看并学习：

//<![CDATA[ 
// change the pre var on any page using this onload technique 
var pre = onload, doc, bod, htm, E, boldToggle; // higher scope in case other onloads need access 
onload = function(){ // same as window.onload - note that window is implicit 
if(pre)pre(); // execute previous onload 

doc = document, bod = doc.body, htm = doc.documentElement; 
E = function(id){ 
    return doc.getElementById(id); 
} 
boldToggle = (function(){ // Anonymous function executes and scopes off var b before returning an unexecuted function 
    var b = 0; 
    return function(e){ // e is for Element here - this is function that is returned unexecuted 
    var s = e.style; 
    if(b){ // test if bold 
     s.fontWeight = 'normal'; b = 0; 
    } 
    else{ 
     s.fontWeight = 'bold'; b = 1; 
    } 
    } 
})(); 
E('b').onclick = function(){ 
    boldToggle(this); // this within Event refers to Element id='b' in this case 
} 

} // end onload 
//]]>

哦，如果使用<button>这将是一个提交按钮，这样做：

<button type='button' id='b'>Bold</button>

我喜欢：

<input type='button' id='b' value='Bold' />

它更清楚，因为许多浏览器无法在<button>上访问.innerHTML，因为它确实是一个输入，所以<button>标记可能会产生误导。当我在这里更正了一些代码时，我学到了这一点，用户在<button>内嵌套了其他元素。这对一些浏览器不起作用，所以我只是喜欢<input type='button' />。如果你曾经在大型项目上工作，这可以防止其他人试图将元素扔到那里不属于的地方。

来源

2016-11-12 05:06:33 PHPglue

*您应该将HTML与JavaScript分开*将HTML与JavaScript分离开来怎么办？ – 2016-11-12 06:25:06

使用类来管理CSS样式。

function bold() { document.getElementById('b').classList.toggle('bold'); }

.bold { font-weight: bold; }

<button id="b" onclick="bold()">Bold</button>

来源

2016-11-12 05:20:16

大胆/不透明按钮

回答

相关问题