无刷新更换页面样式

原创 2007年09月13日 22:33:00

本文只是实现无刷新更改页面样式的一个例子,具体现实中如有问题,可以查询MSDN获取帮助.

要改成页面样式,第一步理解样式文件的加载原理,即新加载在后面的同名样式将自动覆盖原来的同名样式,比如说

body{font:size:10px;backgroup:url(../images/aa.img)repeat top center}这个样式的作用是给背景加上一个图片,图片平铺,然而当页面中在这之后加上一个样式body{backgroup-reapt:noreapt;}这样虽然你的页面中有两个同名的样式,但对背景图片的重复会变成不自动平铺了。

要设置成JS无刷新更改页面样式,可以通过增加一个样式文件(跟原页面的样式结构一样,具体内容不一样),来更改原来页面的样式,代码如下:

var links=document.CreateElements("link");

link.type="text/style";

link.href="other.css";

document.getElementsByTagName("head")[0].AppenChild(link);

这样就可以了。

另一种方法:就是在更改页面中某一部分的样式时,直接通过document.CreateElement("Style")元素来实现。

注意:使用document.CreateElement("Style")时,IE中通过StyleSheet.Text来实现CSS内容的书写,FireFox等浏览器通过增加一个TextNode,然后将样式给其InnerHTML来实现。

如何在静态HTM页面中实现无刷新的更换CSS样式

 在静态HTM页面中实现无刷新的更换CSS样式!    系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更...
  • yzkzoo
  • yzkzoo
  • 2007年12月14日 09:18
  • 476

原生JavaScript+Ajax无刷新加载另一个页面的一部分内容

大家好,初学Ajax,今天给大家带来:原生JavaScript+Ajax无刷新加载另一个页面的一部分内容,代码都是自己纯手写的,由于学的比较零碎,如果有哪里写的不对的还望能够批评改正! 原文链接...
  • u012038147
  • u012038147
  • 2017年10月14日 21:57
  • 342

javascript+css无刷新实现页面样式的更换

如果要更换页面的主题,只能是放在Page_PreInit事件里,而这个事件一般都要经过刷新才会执行,所以这就导致效率下降,用户体验也会跟着下降。 下面我将介绍一下关于Javascript+CSS的解...
  • neubuffer
  • neubuffer
  • 2013年11月23日 14:34
  • 1445

无刷新加载页面

无刷新加载页面,提高加载速度,提升用户体验,可实现加载完毕页面入场动画。不用说,要实现无刷新加载肯定是要用到Ajax。原理是只加载一次index(主页),这个主页我们可以理解成一个容器,需要加载新页面...
  • joneeky
  • joneeky
  • 2016年08月01日 01:37
  • 449

jquery页面无刷新html加载

年龄                         {{age}}                             $(".childNext").c...
  • zelda002
  • zelda002
  • 2015年01月04日 11:25
  • 5400

实现web页面无刷新操作的几种方法

第一种方法:如果要是使用的最基础的ajax调用方式,应该做这几个步骤:1)   在客户端使用XMLhttp,通过javascript类似的代码 objXMLHttp.onreadystatechang...
  • xumingxm
  • xumingxm
  • 2007年11月30日 22:57
  • 713

Niep.js - Web移动端无刷新页面切换 -- 页面数据加载

页面显示时,加载数据 页面的数据均通过ajax获取,当页面需要显示时,会搜索该页面中的所有data-unload的元素,如果data-unload的值为once或refresh,则请求数据。 ...
  • phoooob
  • phoooob
  • 2016年05月26日 16:53
  • 945

使用ajax技术无刷新页面

一:       首先看个小例子(通过GET方式进行无刷新获取服务端的响应数据) script type="text/javascript" language="javascript">   ...
  • civilized
  • civilized
  • 2012年12月03日 22:53
  • 2104

ASP.NET—015:ASP.NET中无刷新页面实现

前面也说过在asp.net中前后前交互的问题。使用了ajax.js的方法:$.post和$.ajax。http://blog.csdn.net/yysyangyangyangshan/article/...
  • yysyangyangyangshan
  • yysyangyangyangshan
  • 2014年09月30日 00:18
  • 7204

jquery ajax无刷新更新页面

1.首先我们得区分一下ajax的异步和同步: 异步是:ajax没有完全执行完,就可以执行后面的代码, 同步是:ajax必须执行完后才可以执行后面的代码..2.好了,既然要ajax不...
  • ha6pp6y
  • ha6pp6y
  • 2016年04月08日 01:01
  • 566
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无刷新更换页面样式
举报原因:
原因补充:

(最多只允许输入30个字)