覆盖html行的Javascript函数

有一个网站引用.js文件和.css文件来为其网页设置格式和添加动态元素。该网站提供了引用我自己版本的这些.js和.css文件的选项，这些文件是我托管在Google代码库中的，然后将使用这些文件。覆盖html行的Javascript函数

我正在尝试添加另一个用于移动浏览的css文件。目前，我在当前的css中使用了@media参数，但是我想要有两个单独的css文件。

有一些代码，我可以添加到我的.js文件，将覆盖HTML，使得：

<html> 
<head> 
    <link href="desktop.css" ...

假作：

<html> 
<head> 
    <link href="mobile.css" ...

当JS检测移动browswer。请记住，js文件在HTML中被进一步引用。

谢谢！

来源

2013-02-13 Daniel

使用[媒体查询（HTTP ：//www.w3.org/TR/css3-mediaqueries/）在你的'link'标签中。 – bfavaretto 2013-02-13 01:03:27

看起来OP没有能力改变HTML源代码......至少我是这样解释这个问题的。另外，OP提到他正在使用媒体参数。这与媒体查询是一样的吗？ – jahroy 2013-02-13 01:05:08

您的代码可能能够更改html，但不会更改desktop.css已加载并应用于页面的事实。 – Christophe 2013-02-13 01:14:48

您可以在@import规则使用媒体查询：

<link href="master.css" …

@import url(desktop.css) (min-width:800px); 
@import url(mobile.css) (max-width:700px);

来源

2013-02-13 01:17:44 bfavaretto

只需'@import url（desktop.css）'工作，但在任何情况下添加之后都不会导致加载css。我使用谷歌控制台移动屏幕宽度没有成功，所以可能的语法错误？谢谢！ – Daniel 2013-02-13 03:13:41

好吧，我得到它的工作！只是缺少一些（） – Daniel 2013-02-13 05:31:11

对不起，我忘了括号！示例已更新。 – bfavaretto 2013-02-13 10:58:18

请试试这个

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
     document.write('<link rel="stylesheet" type="text/css" href="mobile.css">'); 
    } 
    else { 
     document.write('<link rel="stylesheet" type="text/css" href="desktop.css">'); 
    }

是的，这是一个good practice使用CSS @media查询

来源

2013-02-13 00:57:00

如果OP的JavaScript被包含_AFTER_包含css文件，他可能必须操纵现有元素在DOM中而不是简单地追加到文档中... – jahroy 2013-02-13 01:08:46

不幸的是，js被加载后，但谢谢！抱歉，我的帖子中没有更清楚。 – Daniel 2013-02-13 03:15:59

有没有索姆e代码我可以添加到我的.js文件，将重写html？

当然，你可以覆盖的HTML，但有什么意义呢？这太迟了，浏览器已经加载并应用了desktop.css。

如果你想动态的基于浏览器的检测，以保持两个独立的css文件，你需要做的就是删除您的静态链接的标签是什么，并应用正确的样式表：

var stylesheet=document.createElement("link"); 
stylesheet.type="text/css"; 
stylesheet.rel="stylesheet"; 
if (// detect mobile browser) { 
    stylesheet.href=mobile.css; 
} 
else { 
    stylesheet.href=desktop.css; 
} 
document.head.appendChild(stylesheet);

来源

2013-02-13 01:29:16 Christophe

我会在哪里放置这段代码？ – Daniel 2013-02-13 03:15:06

它会出现在你的.js文件中。 – Christophe 2013-02-13 04:44:26

覆盖html行的Javascript函数

回答

相关问题