Js动态添加的html内容怎样用css渲染

Posted 2023-05-09

参考技术A 依旧使用CSS选择器进行控制即可，在前期用相应选择器写好就行了。

jquery动态待装入 HTML 网页内容和动态引入css动态引入js

jquery动态待装入 HTML 网页内容和动态引入css、动态引入js

 

❀ 使用 jquery 提供的方法：load(url, [data], [callback]) ，load 可以一次性引入html、css、js，

通过url引入html内容，通过回调函数callback，引入css、js。

ps:jquery官网文档~https://jquery.cuishifeng.cn/load.html

url:待装入 HTML 网页网址。callback:载入成功时回调函数。

 

(1)只动态引入html内容（使用url参数）：语法 jquery对象.load(url);

示例：

$(\'header\').load(\'头部.html .container\');      //头部是一个包含html内容的文件

❀ 头部.html ~（即你需要的内容写成的html代码）

<div class="container">
    <!-- 头部左侧内容 -->
    <div class="left">
        <a href="#">
            <img  src="images/taptap.png" alt="taptap"/>
        </a>
        <a href="#">
            <i class="wifi"></i>
        </a>
        <ul>
            <li>
                <a class="active" href="#">首页1</a>
            </li>
            <li>
                <a href="#">首页2</a>
            </li>
            <li>
                <a href="#">首页3</a>
            </li>
            <li>
                <a href="#">首页4</a>
            </li>
        </ul>
    </div>
    <!-- 头部右侧内容-->
    <div class="right">
        <div class="ipt-box">
            <input type="text" autocomplete="off" placeholder="请输入..."/>
            <i class="fa fa-search"></i>
        </div>
        <a href="#">
            <img src="images/head_portrait.jpg" alt="搜索" />
        </a>
    </div>
</div>

ps: 如果某个部分的布局在很多页面都出现时，把那部分的html布局，放入一个空白的html文件里，

然后在js里使用load方法的参数url动态引入.

 

(2) 动态引入html内容,同时引入其对应的css样式文件：语法 jquery对象.load(url，function(){ //回调函数里引入css文件 });

示例：~ 头部.css 文件就是修饰 头部.html 中的样式的css 文件

   $(\'header\').load(\'头部.html .container\',function(){　　　　

　　　　let link = document.createElement(\'link\');

   　　　　 $(link).attr({

       　　 rel:\'stylesheet\',

        　　type:\'text/css\',

       　　 href:\'./css/头部.css\'

   　　 });

    $(\'head\').append(link);

});

✿ 将动态引入css封装成一个方法，则可以改写代码：

//封装js动态加载css文件
function addCss(href){
    //判断是否是同文件
    let links = $("link");
    let isHave = false;
    links.each(function (index, element) {
        if($(element).attr(\'href\') === href) {
            isHave = true;
        }
    });
    if (isHave) return;
    let link = document.createElement(\'link\');
    $(link).attr({
        rel:\'stylesheet\',
        type:\'text/css\',
        href
    });
    $(\'head\').append(link);
}


//头部:动态加载html页面，且通过function动态引入其对应的css样式
    $(\'header\').load(\'头部.html .container\',addCss(\'./css/头部.css\'));
//或者：
    $(\'header\').load(\'头部.html .container\',function () {
                addCss(\'./css/Android.css\');
    　　　　　　});

 ps：如果某个部分的布局在很多页面都出现时，把那部分的css样式，放入一个空白的css文件里，

然后使用js里使用load方法的参数function动态引入：

 

(3) 动态引入html内容,同时引入其对应的css样式文件和js 文件：语法 jquery对象.load(url，function(){ //回调函数里引入css文件，js 文件的引入函数 });

 

$(\'header\').load(\'头部.html .container\', function () {
                addCss(\'./css/Android.css\');
               //使用jquery的函数getScript(参数是 js文件的路径)，动态引入js文件
                $.getScript(\'js/头部.js\',function () {
                    //这里可以写在引入头部.js 文件，还动态生成了什么内容
                });

 

 

 

ps：小案例：使用jquery的load方法，同时引入html、css、js~

//Android对应的内容
            $(\'section .ranking-core .nav-content\').load(\'Android.html\', function () {
                addCss(\'./css/Android.css\');
               //使用jquery动态引入js文件
                $.getScript(\'js/Android.js\',function () {
                    AndroidContInit();
                });
            });

❀ Android.html

<!-- 小导航 -->
<div class="android-content" >
    <nav>
        <ul>
            <li>
                <a href="#" class="active">热榜1</a>
            </li>
            <li>
                <a href="#">热榜2</a>
            </li>
            <li>
                <a href="#">热榜3</a>
            </li>
            <li>
                <a href="#">热榜3</a>
            </li>
        </ul>
    </nav>
    <div class="list">
        <ul>
        </ul>
    </div>
</div>

 

❀ Android.css 省略......

 

❀ Android.js

function AndroidContInit(){
    let data = [
        {
            id:1,
            num:1,
            title_img:\'android_covers/1.png\',
            title:\'真三国无双霸1\',
            manufacturer:\'级光\',
            score:\'8.3\',
            desc:\'难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过\',
            tags:[\'冒险\',\' 解密\',\'角色扮演\'],
            tag:\'冒险\',
            desc_img:\'android_images/1.jpg\'
        },
        {
            id:2,
            num:2,
            title_img:\'android_covers/2.png\',
            title:\'真三国无双霸2\',
            manufacturer:\'级光\',
            score:\'8.3\',
            desc:\'难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 然后什么坐骑啊服装加成恶心难搞角色建模移植过\',
            tags:[\'冒险\',\' 解密\',\'角色扮演\'],
            tag:\'冒险\',
            desc_img:\'android_images/1.jpg\'
        },
    ];
    listInit(data);
}

//动态生成list
function listInit(data) {
    let list = $(\'.android-content .list ul\');
    data.forEach(function (value, index) {
        list.append(`
                <li>
                <!-- 封面图片 -->
                <a href="#">
                    <img class="title-img" src="${value.title_img}"  title="${value.title}" />
                </a>
                <!-- 内容描述  -->
                <div class="desc">
                    <div class="top">
                        <!-- 标题 -->
                        <a href="#">${value.title}</a>
                        <div class=" manufacturer">厂商:${value.manufacturer}</div>
                        <!-- 评分 -->
                        <div class="score">
                            <div class="star">
                                <i class="light-star" style="width: ${value.score} * 10%;"></i>
                            </div>
                            <span>${value.score}</span>
                        </div>
                        <!-- 内容描述 -->
                        <p>
                            ${value.desc}
                        </p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                        ${value.tags.map(function (value2, index2) {
                            return `<a href="#">${value2}</a>`;
                        }).join(\'\')}
                        </div>
                        <!-- 右边 -->
                        <span>${value.tag}</span>
                    </div>
                </div>
                <!-- 图片 -->
                <a href="#">
                    <img class="desc-img" src="${value.desc_img}" />
                </a>
                <!-- 名次 -->
                <div class="rank">
                    <span class="ranking-shape"></span>
                    <span class="num">${value.num}</span>
                </div>
            </li>
        `);
    });
}