如果设备上存在键盘，则加载其他样式表（javascript检测）

Question

I am trying to load a different CSS layout in case there is a physical keyboard on the device (q10.css). In case there is no keyboard, the default one is used (normalCss). For some reason the stylesheets are not loaded:

<script>
    var normalCss = document.createElement("<link rel=\"stylesheet\" href=\"css/main.css\" />");
    var q10Css = document.createElement("<link rel=\"stylesheet\" href=\"css/q10.css\" />");

    if (window.navigator.userAgent.indexOf("Kbd") != -1) {
        document.getElementsByTagName("head")[0].appendChild(q10Css);
            }
    else {
        document.getElementsByTagName("head")[0].appendChild(normalCss);
            }
</script>

*any help is highly appreciated :) Thank you!

Answer 1

That's not how you create elements, you have to do it like this :

var normalCss = document.createElement('link');
normalCss.href = 'css/main.css';
normalCss.setAttribute('rel', 'stylesheet');

Answer 2

如您所见， createElement仅解析tagName而不解析文本。