学习使用js和jquery修改css路径,实现html页面主题切换功能

学习使用js和jquery修改css路径,实现html页面主题切换功能

    • 效果图
    • html代码
    • jquery切换css关键代码
    • js切换css关键代码

效果图

请添加图片描述

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改css路径</title>
    <link href="./css/edit1.css" type="text/css" rel="stylesheet" id="mylink">
</head>
<body>
<div>
    <button onclick="editcss('edit1')"> 修改css1路径</button>
    <button onclick="editcss('edit2')"> 修改css2路径</button>
</div>

<script src="./jquery-2.1.4.min.js"></script>
<script>
    function editcss(css_name) {
        //document.getElementById('mylink').href = "./css/" + css_name + ".css";
        $("#mylink").attr('href', "./css/" + css_name + ".css");
    }
</script>

</body>
</html>

jquery切换css关键代码

<script>
    function editcss(css_name) {
       $("#mylink").attr('href', "./css/" + css_name + ".css");
    }
</script>

js切换css关键代码

<script>
    function editcss(css_name) {
      document.getElementById('mylink').href = "./css/" + css_name + ".css";
    }
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LabVIEW电机故障监测系统

电机作为工业生产中的关键设备&#xff0c;其故障会导致生产停滞和经济损失。因此&#xff0c;开发一个能实时监控电机状态并预测潜在故障的系统具有重要意义。通过高效的数据采集和分析技术&#xff0c;提升故障诊断的准确性和及时性。 系统组成 该系统由以下部分组成&#…

内外网映射访问内网服务器

如果本地有公网ip&#xff0c;比如连接的宽带有公网ip&#xff0c;可以直接通过路由配置转发就行了&#xff0c;如果本地没有公网ip&#xff0c;那就需要通过下面这种方式来访问内网服务器了。 1&#xff1a;首先内网服务器需要连接外网&#xff0c;可以通过网线或者WiFi都可以…

Google Earth Engine(GEE)——ui.DateSlider时间进度条的设置

结果 函数: ui.DateSlider(start, end, value, period, <

【递归、搜索与回溯】floodfill算法一

floodfill算法一 1.floodfill算法简介2.图像渲染3.岛屿数量4.岛屿的最大面积 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 1.floodfill算法…

测试:设计测试用例

文章目录 概念设计正交法判定表法 本篇总结的是测试用例的概念和设计方法 概念 测试用例是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这个集合中包含的内容有测试环境&#xff0c;操作步骤&#xff0c;测试数据&#xff0c;预期结果等要素 在测试用例的设计中…

MySQL:JDBC详解!

文章目录 &#x1f4d1;JDBC简介&#x1f4d1;通过代码使用JDBC的API☁️结语 &#x1f4d1;JDBC简介 实际上在工作中&#xff0c;针对数据库的操作&#xff0c;很少会直接通过命令行/图形化客户端来操作数据库&#xff0c;更多的是通过代码&#xff08;C、Java、Python、GO……

基于simulink的PEM燃料电池控制系统建模与仿真,对比PID,积分分离以及滑模控制器

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 PID控制器 4.2 积分分离PID控制器 4.3 滑模控制器 5.完整工程文件 1.课题概述 基于simulink的PEM燃料电池控制系统建模与仿真,对比PID,积分分离以及滑模控制器。 2.系统仿真结果 &#xff08;完…

qt开发-10_LineEdit

QLineEdit 小部件是一个单行文本编辑器。行编辑允许用户使用一组有用的编辑函数输入和 编辑一行纯文本。包括撤消和重做、剪切和粘贴以及拖放。通过更改行编辑的 echoMode()&#xff0c;它 还可以用作“只写”字段&#xff0c;用于输入如密码等. 创建好项目后&#xff0c;进入 …

热重启(硬重启)获取Bitlocker密钥取证

计算机内存&#xff08;条&#xff09;在系统运行时存储了大量敏感信息&#xff0c;当断电后&#xff0c;内存中的数据荡然无存。反之&#xff0c;当一直通电的情况下&#xff0c;内存中的一些敏感数据一直存在。当然&#xff0c;正如某些人了解的&#xff0c;当断电后&#xf…

NeRF从入门到放弃5: Neurad代码实现细节

Talk is cheap, show me the code。 CNN Decoder 如patch设置为32x32,patch_scale设置为3&#xff0c;则先在原图上采样96x96大小的像素块&#xff0c;然后每隔三个取一个像素&#xff0c;降采样成32x32的块。 用这32x32个像素render feature&#xff0c;再经过CNN反卷积预测…

高考填报志愿(选专业),怎样找准自己的兴趣?

在很多的高考报考指南中&#xff0c;第一要点&#xff0c;都会建议我们根据自己的兴趣来选择自己的专业。很多人虽然是依据这条规则&#xff0c;选择了自己大学的专业。却依然在学习的过程中发现&#xff0c;好像自己对这个专业并不是那么的有兴趣。 甚至对专业学习深入了解之…

MySQL数据库笔记(二)

第一章 单行函数 1.1 什么是函数 函数的作用是把我们经常使用的代码封装起来,需要的时候直接调用即可。这样既提高了代码效率,又提高了可维护性。在SQL中使用函数,极大地提高了用户对数据库的管理效率。 1.2 定义 操作数据对象。 接受参数返回一个结果。 只对一行进行…

探索计算机视觉(人工智能重要分支)的发展与应用

引言 在当今快速发展的科技时代&#xff0c;计算机视觉作为人工智能领域的重要分支&#xff0c;正日益成为各行各业不可或缺的关键技术。从简单的图像处理到复杂的智能系统&#xff0c;计算机视觉的发展不仅改变了我们看待世界的方式&#xff0c;也深刻影响着工业、医疗、交通等…

不同交换机之间相同VLAN间主机通信

1、搭建网络拓扑 搭建拓扑&#xff0c;分配IP地址&#xff0c;划分vlan&#xff0c;分配端口 2、配置交换机 //进入全局配置模式 Switch>enable Switch#config terminal Enter configuration commands, one per line. End with CNTL/Z. Switch(config)#hostname SW1 …

如何级联移位寄存器(74HC595)

在这个项目中&#xff0c;我们将使用 74HC595 移位寄存器将 2 个移位寄存器级联在一起。这样级联移位寄存器现在可以控制 16 个输出。 当然您可以级联任意数量的移位寄存器。如果您要级联第三个移位寄存器&#xff0c;它可以控制 24 个输出。如果您级联第四个移位寄存器&#x…

Rxjava2最全面的解析

说到区别&#xff0c;可能有的小伙伴会问&#xff0c;我没看过rxjava1。可以直接看rxjava2么。个人觉得不必要&#xff0c;因为 rxjava2.x 是按照 Reactive-Streams specification 规范完全的重写的&#xff0c;完全独立于 rxjava1.x 而存在&#xff0c;它改变了以往 rxjava1的…

1999-2022年 297个地级市-医院卫生院数量及床位数量(数据收集)

全国297个地级市的医院卫生院数量的稳步增长是医疗事业发展的一个重要标志。政府的持续投入和对医疗设施的改善&#xff0c;不仅提升了医疗服务的硬件水平&#xff0c;也通过引进和培养医疗人才、优化服务流程&#xff0c;提高了医疗服务的整体质量。这些举措极大地增强了人民群…

WordPress项目教程:自动采集并发布,让你轻松实现网站内容更新

随着互联网的发展&#xff0c;越来越多的人开始关注自己的个人网站&#xff0c;通过网站展示自己的才华、分享知识、推广产品等。然而&#xff0c;个人网站的运营并非易事&#xff0c;尤其是内容更新方面。为了解决这个问题&#xff0c;今天我们将为大家推荐一款WordPress插件主…

测试辅助工具(抓包工具)的使用3 之 弱网测试

1.为什么要进行弱网测试&#xff1f; 1.带宽1M和带宽100M打开tpshop网站效果一样吗&#xff1f; 2.手机使用2G网络和使用3G网络打开京东的效果一样吗&#xff1f; 弱网环境下&#xff0c;出现丢包、延时软件的处理机制&#xff0c;避免造成用户的流失。 2.如何进行弱网测试&…

记一道MO数学练习题

手玩发现&#xff0c; 要么是行共线&#xff0c; 也就是说&#xff08;1,1&#xff09;填1之后&#xff0c;&#xff08;1,4&#xff09;要填1&#xff0c;&#xff08;1,7&#xff09;要填1&#xff0c; 事实上&#xff0c;可以给&#xff08;1&#xff0c;x&#xff09;&a…