1

我在 HTML5 + Javascript 中动态创建了一个按钮。我已经为那个按钮分配了一个点击事件。当我点击它时，它的内容和背景颜色应该会改变。内容变化很好，但 bgcolor 没有变化。

我的代码是；

<style>
.selectBtn{ height:60px;width:80px;background-color:yellow; }
</style>
<script>
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function()
{
this.innerHTML='voted';
this.style.backgroundColor:'blue';
}
dx();
</script>
<body><div id='abc'></div></body>
4

3 回答 3

1

使用=而不是colon. 用这个：-

this.style.backgroundColor = "#f47121";
于 2013-07-18T11:29:03.087 回答
0

你不想改变一些事情

var container = document.getElementById('abc');
function dx(){
   var Btn = document.createElement('button');
   Btn.className = 'selectBtn';
   Btn.innerHTML = 'SUBMIT';
   container.appendChild(Btn);
   Btn.onclick = function() {
      this.innerHTML='voted';
      this.style.backgroundColor = 'blue';
   }
}

我不确定是否Btn.type = 'button';有效，但它肯定是没有意义的，而且你想改变的风格:只=在:对象中使用

此外，您可能不想使用textContent而不是innerHTML

于 2013-07-18T11:32:07.667 回答
0

我忍不住要展示我会如何做到这一点，只是为了好玩，以及它的教育目的。

window.onload = function(){

    (function(){
        var doc = document; 
        var get = function(id){return doc.getElementById(id);};
        var inject = function(el,str){el.innerHTML = str;return el;};

        inject(get('content'),'<button type="button" id="btn-select">SUBMIT</button>');
        get('btn-select').onclick = function(){inject(this,'Voted!').className = 'voted';};
    })();

};

演示：http: //jsfiddle.net/ZNfBe/

于 2013-07-18T13:14:47.953 回答