需求:js给html添加css

news2024/12/25 0:02:01

目前发送请求,请求回html:<div class="articleRecommendation_con">
            <a href="https://weekly.caixin.com/2023-05-26/102059365.html"><img src="https://img.caixin.com/2023-05-27/168515251870385_145_97.jpg" alt=""></a>
            <a href="https://weekly.caixin.com/2023-05-26/102059365.html">
            <div class="articleRecommendation_con_right">
                <p>财新周刊</p>
                <p>最新封面报道|烟草反腐风暴</p>
                <p><span>文|财新周刊 黄晏浩 于宁</span> <span>05月26日 21:58</span></p>
            </div>
            </a>
        </div>    
    
    
    
        <div class="articleRecommendation_con">
            <a href="https://www.caixin.com/2023-05-27/102059517.html"><img src="https://img.caixin.com/2023-05-27/168515857546679_145_97.jpg" alt=""></a>
            <a href="https://www.caixin.com/2023-05-27/102059517.html">
            <div class="articleRecommendation_con_right">
                <p>能源</p>
                <p>中创新航5月底集中解约应届毕业生 </p>
                <p><span>文|财新 卢羽桐</span> <span>05月27日 11:33</span></p>
            </div>
            </a>
        </div>    
    
    
    
        <div class="articleRecommendation_con">
            <a href="https://china.caixin.com/2023-05-27/102059584.html"><img src="https://img.caixin.com/2023-05-27/168517636250497_145_97.jpg" alt=""></a>
            <a href="https://china.caixin.com/2023-05-27/102059584.html">
            <div class="articleRecommendation_con_right">
                <p>政经</p>
                <p>高额债务引发家庭矛盾 湖南长沙男子杀害一家四口后自杀</p>
                <p><span>文|财新 何书舟(实习),黄雨馨</span> <span>05月27日 16:25</span></p>
            </div>
            </a>
        </div>    
    
    
    
        <div class="articleRecommendation_con">
            <a href="https://weekly.caixin.com/2023-05-27/102059400.html"><img src="https://img.caixin.com/2023-05-27/168515669738571_145_97.jpg" alt=""></a>
            <a href="https://weekly.caixin.com/2023-05-27/102059400.html">
            <div class="articleRecommendation_con_right">
                <p>财新周刊</p>
                <p>最新财新周刊|阿里分家</p>
                <p><span>文|财新周刊 包云红(实习),张而弛 屈运栩</span> <span>05月27日 08:18</span></p>
            </div>
            </a>
        </div>    
    
    
    
        <div class="articleRecommendation_con">
            <a href="https://finance.caixin.com/2023-05-26/102059060.html"><img src="https://img.caixin.com/2023-05-26/168505643971469_145_97.jpg" alt=""></a>
            <a href="https://finance.caixin.com/2023-05-26/102059060.html">
            <div class="articleRecommendation_con_right">
                <p>金融</p>
                <p>兑付危机爆发三年后 四川信托牵头重组方初步明确</p>
                <p><span>文|财新 刘冉</span> <span>05月26日 07:10</span></p>
            </div>
            </a>
        </div>    
    
    
    
        <div class="articleRecommendation_con">
            <a href="https://science.caixin.com/2023-05-26/102059214.html"><img src="https://img.caixin.com/2023-05-26/168508903204292_145_97.jpg" alt=""></a>
            <a href="https://science.caixin.com/2023-05-26/102059214.html">
            <div class="articleRecommendation_con_right">
                <p>环科</p>
                <p>马斯克旗下脑机接口公司获批进行人体试验</p>
                <p><span>文|财新 徐路易</span> <span>05月26日 16:12</span></p>
            </div>
            </a>
        </div>    

调用接口,但是如果将返回数据的css写在文件中

是不会生效的,这时候应该如何?

我们先将写在文件中的css,const一个css参数,将css放进去

const css = `.taTitle {
                display: block;
                border-top: 2px solid rgba(250, 250, 250, 0.36);
                height: 35px;
                line-height: 35px;
                font-family: PingFangSC-Regular, '微软雅黑';
                font-size: 16px;
                text-align: center;
                margin-bottom: 14px;
            }
            .articleRecommendation_con{
                clear: both;
                margin: 6px 0px;
                overflow: hidden;
            }
            .articleRecommendation_con a:nth-child(1) {
                float: left;
                width: 28%;
                height: 66px;
                padding: 5px 0px;
            }
            a:link {
                text-decoration: none;
                color: #ffffff;
            }
            .articleRecommendation_con a:nth-child(1) img {
                width: 92%;
            }
            .articleRecommendation_con img {
                overflow-clip-margin: content-box;
                overflow: clip;
            }
            .articleRecommendation_con a:nth-child(2) {
                display: block;
                width: 72%;
                float: left;
            }
            .articleRecommendation_con_right p:nth-child(1) {
                display: none;
            }
            .articleRecommendation_con p {
                display: block;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
            }
            .articleRecommendation_con_right p:nth-child(2) {
                margin: 0px;
                line-height: 22px;
                word-wrap: break-word;
                text-align: left;
                font-size: 14px;
            }

            .articleRecommendation_con_right p:nth-child(3) {
                margin: 0px;
                line-height: 20px;
                word-wrap: break-word;
                text-align: left;
            }
            .articleRecommendation_con_right p:nth-child(3) span:nth-child(1) {
                display: none;
            }
            .articleRecommendation_con_right p:nth-child(3) span:nth-child(2) {
                color: #ececec;
                line-height: 20px;
                font-family: PingFangSC-Regular, '微软雅黑';
                font-size: 12px;
                text-align: left;
            }`

 

const sheet = new CSSStyleSheet();
    sheet.replaceSync(css);
    document.adoptedStyleSheets = [sheet];

然后就css生效了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/583338.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何选择适合平台的直播美颜SDK:从技术和商业角度考虑

直播美颜SDK作为一种技术解决方案&#xff0c;可以帮助直播应用实现优秀的美颜效果&#xff0c;提高用户体验和粘性。然而&#xff0c;如何选择适合你应用的直播美颜SDK&#xff0c;需要从技术和商业角度综合考虑。本文将从这两个角度出发&#xff0c;为你介绍如何选择适合你应…

手把手带你读vue2文档(基础篇总结)

目录 声明式渲染 v-bind v-if条件与循环 name命名 学会log打印 一些js方法 双向绑定v-model和v-bind 那么请实现一个复选框吧 自定义标签模板 vue2实例 数据与方法 你提到vue有两种数据和方法&#xff0c;js是不是只有一种 vue2自带的实例和方法 vue2$会和jQuery冲…

四站精彩回顾 | Fortinet Accelerate 2023·中国区巡展火热进行中

Fortinet Accelerate 2023中国区巡展 上周&#xff0c;Fortinet Accelerate 2023中国区巡展分别走过青岛、南京、长沙、合肥四站&#xff0c;Fortinet携手太平洋电信、亚马逊云科技、中企通信等云、网、安合作伙伴&#xff0c;与各行业典型代表客户&#xff0c;就网安融合、网…

spring事务管理详解和实例(事务传播机制、事务隔离级别)

目录 1 理解spring事务 2 核心接口 2.1 事务管理器 2.1.1 JDBC事务 2.1.2 Hibernate事务 2.1.3 Java持久化API事务&#xff08;JPA&#xff09; 2.2 基本事务属性的定义 2.2.1 传播行为 2.2.2 隔离级别 2.2.3 只读 2.2.4 事务超时 2.2.5 回滚规则 2.3 事务状态 3…

盘点索引常见的11个知识点

今天来盘点一下关于MySQL索引常见的知识点 本来这篇文章我前两个星期就打算写了&#xff0c;提纲都列好了&#xff0c;但是后面我去追《漫长的季节》这部剧去了&#xff0c;这就花了一个周末的时间&#xff0c;再加上后面一些其它的事&#xff0c;导致没来得及写 不过不要紧&…

chatgpt赋能python:Python中0的输入方法:完整指南

Python中0的输入方法&#xff1a;完整指南 Python是一门强大的编程语言&#xff0c;广泛应用于数据分析、人工智能、网络应用等领域。在Python中&#xff0c;输入0有多种方法&#xff0c;因此本文将带您深入了解Python中0的输入方式&#xff0c;包括基础类型、字符串和列表等结…

【计算机网络】网络安全,HTTP协议,同源策略,cors,jsonp

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 网络安全非对称加密中间人攻击 HTTP协议同源策略corsjsonp 网络安全 非对称加密 会生成一个公…

Arm发布最新内核 : Corte-X4/A720/A520,支持Armv9.2

1、背景 Arm 是一家设计智能手机的CPU内核的公司&#xff0c;并且每年它都会进行新的迭代&#xff0c;这些迭代随后将集成进芯片SOC&#xff0c;例如当年的旗舰 Snapdragon 、 MediaTek Dimensity。2023年&#xff0c;发布了新的旗舰级内核&#xff1a; Cortex-X4 超大核、Cort…

数据集成到可视化分析,轻松驾驭数据洞察力:ETLCloud与帆软BI完美结合

在当今数据驱动的业务环境中&#xff0c;企业需要快速而准确地获取、处理和分析大量的数据。为了满足这一需求&#xff0c;ETLCloud通过和帆软BI的集成提供了一种强大的数据采集和数据分析解决方案&#xff0c;通过可视化的ETL工具和灵活的BI功能&#xff0c;帮助企业快速实现高…

【笔记整理】元学习笔记

【笔记整理】元学习笔记 文章目录 【笔记整理】元学习笔记一、元学习基础概念1、概述&#xff08;“多任务&#xff0c;推理&#xff0c;快速学习”&#xff09;1&#xff09;Meta-learning&#xff08;“学习如何学习” “老千层饼”&#xff09;2&#xff09;Transfer learn…

JDBC查询数据库——普通、流式、游标

问题 通过JDBC对MySQL进行数据查询时&#xff0c;有个很容易踩的坑&#xff0c;以下面代码为例&#xff1a; public static void selectNormal() throws SQLException{Connection connection DriverManager.getConnection("jdbc:mysql://localhost:3306/test", &qu…

【一次调频】考虑储能电池参与一次调频技术经济模型的容量配置方法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【IEEE/TOP录用】中科院2区TOP仅3个月录用~

一、【录用案例】 喜提一篇IEEE旗下中科院2区TOP录用&#xff1b; 2023/1/31提交&#xff0c;2023/5/26录用&#xff0c;仅3个月零26天录用&#xff1b; 传感器类SCIE&EI 【IF及分区】IF:4&#xff0c;JCR1/2区&#xff0c;中科院2区&#xff1b; 【检索情况】SCIE&E…

c语言编程练习题:7-42 整除光棍

#include <stdio.h>int main() {int x,s1,n1;scanf("%d",&x);while(s<x){ss*101;n;}while(1) {printf("%d",s/x); if(s%x0) break;s(s%x)*101;n;}printf(" %d",n);return 0; }代码来自&#xff1a;https://yunjinqi.top/article/16…

pdf如何转换成jpg图片?

pdf如何转换成jpg图片&#xff1f;PDF&#xff08;Portable Document Format&#xff09;是一种常见的文件格式&#xff0c;由Adobe Systems创建。与其他文档格式相比&#xff0c;它具有固定页面布局和跨平台兼容性等优点&#xff0c;因此广泛应用于电子书、论文、技术手册、合…

从外包到阿里,这 2 年 5 个月 13 天到底发生了什么?

个人背景&#xff1a; 本人毕业于浙江某二本院校&#xff0c;算是科班出身&#xff0c;毕业后就进了一家外包公司做测试&#xff0c;当然不是阿里的外包&#xff0c;具体什么公司就不透露了&#xff0c;在外包一呆就呆了整整 2 年多&#xff0c;直到现在才从外包离开&#xff…

Linux上jdk无法执行二进制文件及​gzip: stdin: invalid compressed data–format violated​报错

首先输入命令 java -version 直接给我报错&#xff1a;无法执行二进制文件 网上找了一堆&#xff0c;后面你得看看自己的Linux架构是什么&#xff0c;输入以下命令查看linux的操作系统版本 cat /proc/version 我当时华为云选择的服务器是openEuler。看到aarch64才反应过来我…

ATECLOUD芯片自动化测试平台,打破传统自动化测试5大问题

芯片测试通常包括以下几个步骤&#xff1a;设计验证测试&#xff08;Design Verification Testing&#xff09;&#xff1a;在设计阶段&#xff0c;通过一系列的仿真和验证测试来确保设计的正确性和可行性。这些测试可能包括电路板布局、逻辑分析、时序分析等。原型验证测试&am…

U盘超级加密3000忘记密码该怎么办?

作为一款专业的U盘加密软件&#xff0c;U盘超级加密3000是目前最受欢迎的U盘加密软件之一&#xff0c;它可以简单有效地加密U盘数据&#xff0c;最大程度的降低U盘数据泄露的风险。那么U盘超级加密3000忘记密码该怎么办呢&#xff1f; U盘超级加密3000一共有4处可以设置密码的场…

【Python】一个房贷计算器功能的小案例

题目要求&#xff1a; 房贷计算公式如下: 〉每月月供参考贷款金额[月利率(1&#xff0b;月利率)^还款月数]{[(1月利率)^还款月数]–1}>还款总额每月月供参考期限 12 ≥支付利息还款总额–贷款金额10000 以上计算方式中月利率(月利率利率12&#xff09;)指以月为计息周期计算…