javascript类名函数的问题_Javascript_Html_Css

javascript类名函数的问题

javascript html css

javascript类名函数的问题,javascript,html,css,Javascript,Html,Css,我正在构建一个android应用程序，它使用现有移动web应用程序的网络视图。现有的移动web应用程序有一个页眉图形和一个使用无序列表的页脚导航由于android应用程序具有本机导航和内置的页眉，因此在使用移动web应用程序中的网页视图时，android应用程序中的web应用程序页眉和页脚是多余的。由于移动web应用程序将用于BlackBerry和windows Phone等设备，因此我无法完全删除页眉和页脚。此外，web应用程序标题使用了一些CSS，因此我需要确保移动web应用程序中有CSS

我正在构建一个android应用程序，它使用现有移动web应用程序的网络视图。现有的移动web应用程序有一个页眉图形和一个使用无序列表的页脚导航

由于android应用程序具有本机导航和内置的页眉，因此在使用移动web应用程序中的网页视图时，android应用程序中的web应用程序页眉和页脚是多余的。由于移动web应用程序将用于BlackBerry和windows Phone等设备，因此我无法完全删除页眉和页脚。此外，web应用程序标题使用了一些CSS，因此我需要确保移动web应用程序中有CSS

因此，我决定尝试使用javascript来检测android操作系统，在检测到android操作系统时动态地为页眉和页脚div分配一个类名，并在CSS中引用类名以不显示这些div。如果操作系统不是android，那么它将创建指向CSS文件的样式指针，该CSS文件是移动web应用程序中标题所需的

我不是javascript或CSS专家，所以我提出了一个简单的测试来确保所有这些都能正常工作。一切正常，只是它似乎没有将类名分配给div，以便在检测到android操作系统时不显示它。我知道它正在检测android操作系统，因为我在if语句中有一个警报，这是有效的。我想不出哪里出了问题。我在使用安卓4.4和Chrome的谷歌Nexus7和使用Chrome的摩托罗拉RAZR Droid上进行了测试

测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>
.android
{
    display:none;
}
</style>

<script language="javascript" type="text/javascript">

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    }
};

var divID = "test";

var newClassName = "android";

function changeClass() {

var divReference = document.getElementById(divID);

divReference.className = newClassName;

};

if( isMobile.Android() ) 
    {
        alert("android!");
        changeClass();

}
else
{
    alert("Not android!");
    document.write("<link rel='stylesheet' href='header.css' type='text/css'>");
}

</script>





<title>Untitled Document</title>
</head>

<body>
<h1>Detect android device and hide second UL list below. If not android device, then hide   the first UL list.</h1>
<div class="notandroid">
<ul>
<li>One</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<h2>This header is after the first UL list</h2>

<div id="test">
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
<h2>This header is after the second UL list</h2>

</body>
</html>


安卓
{
显示：无；
}
var isMobile={
Android:function（）{
返回navigator.userAgent.match（/Android/i）；
}
};
var divID=“测试”；
var newClassName=“安卓”；
函数changeClass（）{
var divReference=document.getElementById（divID）；
divReference.className=newClassName；
};
if（isMobile.Android（））
{
警报（“安卓！”）；
changeClass（）；
}
其他的
{
警报（“不是android！”）；
文件。填写（“”）；
}
无标题文件
检测android设备并隐藏下面的第二个UL列表。如果不是android设备，则隐藏第一个UL列表。

一个
两个
三

此标题位于第一个UL列表之后

四
五
六

此标题位于第二个UL列表之后

尝试将脚本标记放在正文底部。脚本运行时，div不存在。浏览器在遇到脚本标记时会立即解析并运行javascript，因此您需要在DOM就绪后运行javascript。

您正在调用

changeClass（）

，然后才定义要使用的元素

document.getElementById（）

。要么将代码放入

onload=function（）{/*此处*/}

，要么将脚本标记放在身体底部。简而言之，在使用JavaScript获取HTML之前，必须先创建HTML。此外，XHTML中不支持

document.write（）

有很多很好的理由可以避免浏览器检测。但是，如果你决定继续这样做，你面临的主要问题是，这段代码在头部运行，但你正在寻找的DIV还不存在，因为它在身体中。如果您想要

文档，您可能需要分两个块来完成此操作。为头部的CSS编写。
将
移动到
的最末端。或者将其关闭在窗口中。onload？除了脚本也是文档之外。编写-ing CSS标记，理想情况下，它应该仍然位于头部。我认为它需要拆分一点。对于记录，window
是隐式的，因此onload
与window相同。onload
。不应该在XHTML中使用document.write（）
@PHPglue：有很多很好的理由可以避免浏览器检测，但是OP两者都可以。谢谢！工作完美。