Question

我已经在HTML5 + Javascript中动态创建了一个按钮。我已为该按钮分配了一个点击事件。当我点击它时，它是内容＆amp;背景颜色应该改变。内容正在变化，但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>

Answer 1

使用=代替colon。使用此： -

this.style.backgroundColor = "#f47121";

Answer 2

你不会改变一些事情

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

Answer 3

我无法抗拒地展示我将如何做到这一点，只是为了娱乐和教育目的。

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

};

DEMO：http://jsfiddle.net/ZNfBe/

无法将样式应用于其点击事件上的按钮

3 个答案: