javascript - 让DIV加载CSS文件

标签 javascript jquery html css

对于我正在编写的程序,我有一个主导航页面,用户在登录系统后可以在该页面上登陆。

在这个屏幕上,我使用了 2 个 DIV,其中一个用于导航栏,第二个用作 iFrame。

我正在使用 w3.css 库来创建导航栏,但是当我在第二个 div 中加载目标文件时,这实际上弄乱了我的 CSS 主 CSS 文件。但是如果我使用我真的不喜欢做的 iFrame,它就可以正常工作。

如果我可以在 div 加载目标链接文件时加载我的 CSS 文件,问题就会解决。

所以我的问题是如何在加载外部文件时将 CSS 文件加载到 div 中。

这是我的 HTML:

<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">


<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>

    </head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
<a href="listUser.php" target="container" id="main" class="w3-bar-item w3-button w3-hover-light-blue">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue w3-right">Link 3</a>
</div>
<div id="My-container">
<!--  All pages load here  -->
</div>


</body>
</html>

我的导航栏 JavaScript:

$(document).ready(function(){

    $('#main').click(function () {
        $('#My-container').load('listUser.php');
    })

});

文件加载器 JavaScript:

$(document).ready(function(){

    if($("#my-container").size>0){
        if (document.createStyleSheet){
            document.createStyleSheet('../../CSS/main.css');
        }
        else {
            $("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
        }
    }
});

上面的文件加载器功能不是我的 我在网站上找到它并尝试使用它但是当我使用控制台时抛出一个错误说“大小”不是一个功能。当我将其更改为长度时,错误消失但代码不起作用。

如果有人问为什么不直接将导航栏复制粘贴到所有文件,我的回答是我很懒。

无论如何,请告诉我光。

最佳答案

您似乎想检查该特定 dom 是否存在。为此,您需要使用 length。此外,dom id 似乎是 My-container 而不是 my-container

你可以试试下面的方法

if($("#My-container").length>0){
// rest of the code
}

关于javascript - 让DIV加载CSS文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43931299/

相关文章:

javascript - 使用 lodash 或 javascript 从对象数组中删除基本键对象

javascript - 正则表达式 - PHP 到 Javascript

javascript - 使用 *ngIf 会导致 HTTP 请求无限循环

javascript - 查找 Backbone 中所有选中的复选框

html - 如何不断交替两张图片

javascript - 如何获取下拉值(数组计数范围)?

javascript - 如何使用 jquery 将相同类的元素包装在列表框中?

javascript - 如何验证 mxgraph 中单元格的未连接边

html - 如何在有 4 个 img 的 bootstrap(col xs-12 col-sm-6 col-md-2 col-lg-2) 中居中一行?

css - 创建带有标题标题的div