Question

我正在尝试使用以下代码将按钮添加到我的页面正文中，按钮出现，但没有显示任何属性，它是一个默认按钮，不增加字体大小，不显示文本，没有颜色。

＆＃13;

function createKeyboard()
	{
	   var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	   for(var i=0; i<str.length; i++)
	   {
	    var nextChar = str.charAt(i);
	    var btn = document.createElement("BUTTON");
    	btn.setAttribute("id","btn"+nextChar);
    	btn.setAttribute("innerHtml",nextChar);
    	btn.setAttribute("value",nextChar);
    	btn.setAttribute("text",nextChar);
    	btn.setAttribute("font-size","14px");
    	btn.setAttribute("background-color","#4CAF50");
    	document.body.appendChild(btn);
    	}
    };

＆＃13;

当使用控制台查看按钮时，我可以看到属性存在，如下所示：

＆＃13;

    <button id="btnA" innerhtml="A" value="A" text="A" font-size="14px"        background-color="#4CAF50"></button>

＆＃13;

不确定我在哪里出错了，有什么想法吗？

-Thanks

Answer 1

一切都不是属性，特别是innerHTML。

btn.setAttribute("style","font-size:14px;background-color: #4CAF50");
btn.innerHTML = "A"

Answer 2

属性＆＃34; font-size＆＃34;和＆＃34;背景色＆＃34;需要在风格=＆＃34; font-size：14px;背景色：＃4CAF50;＆＃34;
innerHTML确保HTML为大写
我不确定＆＃34; text＆＃34;是按钮

这有什么作用吗？您使用了很多我确定无效的属性。

编辑：+1 Xufox的评论。以下是更多内容：

如果您需要做什么，您需要了解：

HTML属性
- 最常见的是id，class，href，src，style＆lt;通常，当你创建一个类并通过css为它分配样式时，开发人员会更喜欢它。这是代码btn.setAttribute("id","btn"+nextChar);的工作原理。这是一个更多的链接：http://www.w3schools.com/html/html_attributes.asp
HTML DOM节点（节点具有属性＆lt; - xufox所指的内容。）
- 当浏览器呈现HTML时，它会注册每个元素 <div>example element</div>作为可以操作的节点。一些常见的节点属性是：innerHTML，style，id ...注意重叠？是的，使用DOM节点属性操作可以轻松编辑元素属性。 btn.innerHTML = 'Wow, this is easy!';

结论：试试这个，发布任何进一步的问题

function createKeyboard()
{
   var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   for(var i=0; i<str.length; i++)
   {
    var nextChar = str.charAt(i);
    var btn = document.createElement("BUTTON");
    btn.id = 'btn' + nextChar;
    btn.innerHTML = nextChar;
    btn.setAttribute("value", nextChar);
    btn.setAttribute("text",nextChar);
    btn.style.fontSize = "14px";
    btn.style.backgroundColor = '#4CAF50';
    document.body.appendChild(btn);
    }
};

比btn.style编辑更好的是添加一个使用css设置样式的类。但是为了这次谈话的目的，我将在那里结束。

Answer 3

你可能想要检查一下。刚刚做到了。

＆＃13;

// external.js
var doc, bod, htm, C, E, buttonMaker; // reuse on other loads
addEventListener('load', function(){

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
buttonMaker = function(alphaString, appendTo, clickFunc){
  var a = alphaString.split('');
  for(var i=0,b,l=a.length; i<l; i++){
    b = C('input'); b.type = 'button'; b.value = a[i];
    b.addEventListener('click', clickFunc);
    appendTo.appendChild(b);
  }
  return appendTo;
}
var test = E('testOut');
function buttonClickHandler(){
  test.innerHTML += this.value;
}
buttonMaker('abcdefghijklmnopqrstuvwxyz', E('buttons'), buttonClickHandler);
E('clear').onclick = function(){ // can't reuse without writing over
  test.innerHTML = '';
}

});

＆＃13;

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}
#buttons>input{
  font-size:14pt; background-color:#4CAF50;
}
#testOut{
  height:25px;
}

＆＃13;

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='buttons'></div>
    <div id='testOut'></div>
    <input type='button' id='clear' value='clear' />
  </div>
</body>
</html>

＆＃13;

使用for循环在javascript中动态创建按钮，并分配属性。

3 个答案: