JS控制网站样式改变的原理

网站样式改变是随着样式表改变而改变的,所以整个网站的样式改变仅需要改变风格css文件即可。通常静态网站改改变样式方法如下:

function shiftStyle(){
 if(db_shiftstyle == 1){
  if (getObj(‘widthCfg‘).innerHTML==‘切换到宽版‘) {
if(!getObj(‘fullscreenStyle‘)) {
  var l = document.createElement(‘link‘);
  l.id="fullscreenStyle";
  l.rel="stylesheet";
  l.type="text/css";
  l.href="images/fullscreen.css";
  l.media="all";
  document.body.appendChild(l);
}else {
 getObj(‘fullscreenStyle‘).disabled = false;
}
getObj(‘widthCfg‘).innerHTML=‘切换到窄版‘;
var widthCfg = 1;
  } else {
var widthCfg = 0;
getObj(‘fullscreenStyle‘).disabled=true;
getObj(‘widthCfg‘).innerHTML=‘切换到宽版‘;
  }
  SetCookie(‘widthCfg‘,widthCfg);
  if(typeof goTop!="undefined"){
goTop.setStyle();
  }
  if(typeof messagetip!="undefined"&&typeof messagetip.db!="undefined"){
messagetip.setStyle();
messagetip.update();
  }
 }
};

  

另外,改变了网站样式表之后,一定要处理原来和现在的样式表关系。

处理方法如下:

1. 检查网页cookie中有没有更改过的样式表痕迹

2. 根据更改过的痕迹选择css文件路径

3. 加载css文件路径

各位大神请指教,以上方法也仅是小弟的一面之词,望有更好的方法。

时间: 2024-10-17 01:34:25

JS控制网站样式改变的原理的相关文章

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

js控制style样式

1.行内样式获取打印出来 2.内嵌和外链的获取不了 <div style="width:200px;height:200px; background: red;"></div> var box=document.getElementsByTagName("div")[0]; console.log( box.style.width) 3.style属性是对象(数组对象) 4.可以索引值取值 console.log(box.style[0]);

Vue.js 控制css样式

<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="text/css"> .blue{ background-color: blue; } .green{ background-color: green; } div{ width: 400px; height: 200px; border-bottom-width: 2px; } </

JS控制菜单样式切换

$('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href.indexOf(href) > -1) { $(".tab").removeClass("now-tab"); $(ele).parent().addClass('now-tab'); } });

JSF根据控制层代码改变前端样式

使用jsf时,有时候需要在请求了控制层之后改变当前文本或者div的样式,页面无需写js代码,这里可以用一种方法来做到,在此做个记录.示例性代码如下: 1 <li class="#{bean.isTure?'a':'b'}"> 2 <label>哈哈</label> 3 </li> 根据bean中的isTrue方法返回的值,做一个三目运算来选择相应的class即可.

android selector(如对TextView点击样式改变)

selector 1.selector 从单词的意思来说:选择者,选择器,就是对你的目标的控制. 从API来说: A controller for the selection of SelectableChannel objects. Selectable channels can be registered with a selector and get a SelectionKey that represents the registration. The keys are also add

DotNetBar怎样控制窗口样式

DotNetBar怎样控制窗口样式 老帅  在C#中使用控件DevComponents.DotNetBar时,怎样创建一个美丽的窗口.并控制窗口样式呢? 1.新建一个DotNetBar窗口 2.使OFFICE窗口风格生效   假设执行时还是默认窗口风格,而不是offfice风格,可禁用系统的Glass主题就可以. 例如以下代码: this.EnableGlass = false; 3.禁止关闭窗口    private void FormTest_FormClosing(object sende

《大型网站技术架构 -核心原理与安全分析》读书笔记

大型网站架构演化的价值观 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候去追求网站的架构是舍本逐末,得不偿失的.小型网站最需要做的就是为用户提供好的服务来创造价值,得到用户的认可,活下去,野蛮生长. 网站架构设计误区 一味追求大公司的解决方案 大公司的经验和成功模式固然重要,值得学习借鉴,但如果因此而变得盲从,就失去了坚持自我的勇气,在架构演化的道路上迟早会迷路. 为了技术而技术 网站技术是为业务而存在的,除此毫无意义.在技术选型和架构设计中

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业