Question

我有一个动态生成输入框的脚本

    var gridBuilder = function() {
    var html = [];
    for (var index = 1; index <= gridSize * gridSize; index++) 
    {

        html.push("<input id='id" + index + "' class='field' type='text' size='3' maxlength='3' name='name" + index + "'/>");
    }
    return html.join("");
};

我正在应用以下CSS。

.field {  
  padding: 5px;  
  font-size: 15px;  
  text-shadow: 0px 1px 0px #fff;  
  outline: none;  
  background: -webkit-gradient(linear, left top, left bottombottom, from(#bcbcbe), to(#ffffff));  
  background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  border: 1px solid #717171;  
}

我的css链接到正确的类不是吗？问题是.field中定义的CSS都没有显示在我的输入上。

Answer 1

我把你的javascript和css放到JsFiddle中，风格正在被提升。我输入了一个任意的gridSize，因为我不确定哪些数字是正常的。

请在此处查看 - http://jsfiddle.net/rTw8r/2/

但是，你的webkit渐变有一个拼写错误

应该是

-webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));

你有底部而不是底部

Answer 2

它对我有效！

我让你成了一个jsFiddle，所以你可以看看你是否做了不同的事情：）

http://jsfiddle.net/neYXk/3/

也许你正在做一个document.write在一个不好的地方“覆盖”包含你的CSS的核心html？

您应该开始使用http://jquery.com/！使js的生活变得如此简单:)！

Answer 3

确保在您的网页上使用您的CSS文件。

尝试样式将css样式应用于在javascript函数中动态生成的输入框元素

3 个答案: