网页换肤:原生js与jq】的更多相关文章

网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 基本流程如下: 上面是使用流程图来描述下,自从工作以来很小画这样的流程图 如果流程图画错了或者画的不够好 请大家原谅! 先来看看效果图吧! 我只是做个demo 来实现这样一个效果!假如页面上一进来的时候 有这么四个按钮 分别代表不同…
使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>网页换肤<…
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .getAttribute("属性") 2-jquery 获取属性 .attr("属性") 示例代码 /*jq获取属性*/ var temp = $('.test1').attr('class'); /*js获取属性*/ var temp = document.getElem…
使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head> <link id="css1" href="5-1.css" type="text/css" rel="stylesheet"> <script> function ys1(){ var a=do…
1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" type="text/css"><TITLE>换肤技术</TITLE><SCRIPT LANGUAGE=javascript><!--function SetCookie(name,value){     var argv=SetCookie.ar…
具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />…
JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口文档body的高度: $(document.body).height(); 浏览器当前窗口文档body的宽度: $(document.body).width(); 获取滚动条…
来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添…
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以看到我们获取到了id为div1的元素代码了 (2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.3.1.min.js"></script> <script src="../JQuery/carhartl-jquery…