Question

<style>
<script>
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
    screenW = screen.width;
    screenH = screen.height;
}
else if (navigator.appName == "Netscape" 
&& parseInt(navigator.appVersion)==3
&& navigator.javaEnabled()
) 
{
    var jToolkit = java.awt.Toolkit.getDefaultToolkit();
    var jScreenSize = jToolkit.getScreenSize();
    screenW = jScreenSize.width;
    screenH = jScreenSize.height;
}

document.write(
".wrap, html {font-family: 'PT Sans', sans-serif;     width:"+screenW+"px;height:"+screenH+"px;}"
)
</script>
</style>

这个脚本是为了将用户的屏幕大小添加到这个简短的CSS片段的高度和宽度参数中，我在内部包含这些参数，缺少使用外部样式表进行此操作的方法。

我很乐意学习一种新的更有效的方法。然而，我的官方问题是这个剧本会起作用吗？

http://www.javascripter.net/faq/screensi.htm是我抓住这个页面的位置！

Answer 1

我是使用XHTML完成的（如果它在XHTML中工作，它在HTML中工作，但99.9％的时间反之亦然），所以你知道你在这里得到了一个高质量的例子。

首先，不要将脚本元素设为样式元素的子元素。

其次，永远不要将一个脚本元素放在body元素中，除非你想让事情在路上发生严重损坏。

永远不要使用document.write，因为它不兼容XHTML或innerHTML，因为它将代码视为文本字符串而不是代码，这意味着当您尝试更改转储到DOM中的内容时，它可能会或可能不会起作用因为你可能指的是代码，或者你可能指的是看似代码的文本。

将以下内容保存为example.xhtml，然后在Firefox中打开。我建议使用Firebug的检查器来查看DOM，这样您就可以看到引用了带有screen_height和screen_width的样式表的链接元素可以在您的最后确认。随意问我任何（理智的）问题。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="application/javascript">
//<![CDATA[
function load_css()
{
 var l = document.createElement('link');
 l.setAttribute('href','themes/example/style.css?screen_height='+encodeURIComponent(screen.height)+'&screen_width='+encodeURIComponent(screen.width));
 l.setAttribute('rel','stylesheet');
 l.setAttribute('title','example');
 l.setAttribute('type','text/css');
 document.getElementsByTagName('head')[0].appendChild(l);
}

window.onload = function()
{
 load_css();
}
//]]>
</script>
</head>

获取要在CSS中使用的屏幕大小

1 个答案: