大膽/不透明按鈕

我目前正在使用在線文本編輯器作爲項目的一部分，並且至少可以說，我在使用粗體按鈕時遇到了一個小問題。大膽/不透明按鈕

這是我在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

大膽/不透明按鈕

回答

相關問題