Question

我目前正在使用在线文字编辑器作为项目的一部分，至少可以说，我的粗体按钮存在一个小问题。

这是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>内解开文本。

我做错了什么？

Answer 1

试试这个：

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

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

Answer 2

使用外部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' />

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

Answer 3

使用类来管理CSS样式。

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

.bold { font-weight: bold; }

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

Answer 4

class Example {
public:
    Example() {
        std::cout << "constructor called" << std::endl;
    }

    ~Example() {
        std::cout << "destructor called" << std::endl;
    }

    // some operator delete magic perhaps?
};

int main() {
    Example* example_pointer;

    {
        Example example; // prints "constructor called"
        example_pointer = &example;
    } // example still exists here, nothing is printed

    delete example_pointer; // deleting automatic variable manually
    // Prints "destructor called"

    return 0;
}

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';
    }
}

加粗/解锁按钮

4 个答案: