0

因此，使用我在这里得到的建议，我尝试像这样实现它：

  1. 我创建了以下kbd.js文件：

    function fnRenderKBD(elem, keysToDisplay)
{
    var delimiter = '';
    var content = '';
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
        delimiter = '+';
    }
    elem.innerHTML = content;
}
(function() {
        var keys = [ 'Ctrl+X','Y','Z'];   
        var elem = document.getElementById('display');
        fnRenderKBD(elem, keys);
    }
)();

  2. 然后我创建了以下样式表，称为kbd.css：

    kbd {
    padding: 0.1em 0.6em;
    border: 1px solid #CCC;
    font-size: 11px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #F7F7F7;
    color: #333;
    -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0.1em;
    text-shadow: 0 1px 0 white;
    line-height: 1.4;
    white-space: nowrap;
}​

  3. 然后，我尝试构建一个简单的 HTML 文件来检查结果，称为keyboard-rendering.htm

    <script src="kbd.js"> </script>
<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">​
<div id="display"></div>​

我的问题是，为什么这不起作用（输出为“​”），即为什么它没有给我与这里右下象限相同的输出。

4

6 回答 6

1

在页面末尾调用您的脚本。因为您的脚本没有找到 id 为“display”的元素。

改变这个

<script src="kbd.js"> </script>
<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">​
<div id="display"></div>​

至

<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">​
<div id="display"></div>​
<script src="kbd.js"> </script>

或者，如果您想首先包含您的脚本文件而不是更改 kbd.js 中的函数

(function() {
        var keys = [ 'Ctrl+X','Y','Z'];   
        var elem = document.getElementById('display');
        fnRenderKBD(elem, keys);
    }
)();

至

window.onload = function() {
    var keys = [ 'Ctrl+X','Y','Z'];   
    var elem = document.getElementById('display');
    fnRenderKBD(elem, keys);
};
于 2012-08-27T08:31:16.090 回答
1

您最直接的错误是在加载 .js 文件后'display'放在页面上。

当浏览器下载.js文件时，它会在下载完成后立即运行其中的内容。

这意味着当您的键盘代码被加载时，它会在<div>甚至存在之前进行设置。

那很好，如果您要设置以后可以触发的功能。但是 .js 文件底部的代码，里面的东西(function () {}());会立即触发。它正在寻找<div>，但它不会找到它。

将 .js 文件移动到其他所有文件的下方。

于 2012-08-27T08:32:12.093 回答
1

也许遵循这个：

window.onload = function() {

    var keys = [ 'Ctrl+X','Y','Z'];   
    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
};

并检查您页面的字符集：

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
于 2012-08-27T08:44:42.910 回答
0

您应该将脚本代码放在 div 元素之后的 body 标记中，如下所示：

<body>

<div id="display"></div>
<script>
function fnRenderKBD(elem, keysToDisplay)
{
    var delimiter = '';
    var content = '';
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
        delimiter = '+';
    }

    elem.innerHTML = content;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById("display");
    fnRenderKBD(elem, keys);
})();
</script>

</body>

它会工作:)

于 2012-08-27T08:58:25.650 回答
0

请将您的脚本放在页面末尾，然后它将正常工作

链接JS 

<script type="text/javascript" src="kbd.js"> </script>
于 2012-08-27T08:36:17.820 回答
0

请把你的js包含在底部。


<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">
<div id="display"></div>
<script src="kbd.js"> </script>
于 2012-08-27T08:40:18.500 回答