一种样式变换方法

最新推荐文章于 2022-03-07 10:10:28 发布
最新推荐文章于 2022-03-07 10:10:28 发布
阅读量289 收藏
点赞数
分类专栏： Javascript Web开发 文章标签： class function javascript null css url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuyabao/article/details/2176125
版权

样式变换
  <style>
   #StyleSelect LI { FLOAT: left; LIST-STYLE-TYPE: none }
   #StyleSelect LI.on { BACKGROUND-IMAGE: url(./Images/StyleColor.gif); BACKGROUND-REPEAT: no-repeat }
   .thm-1 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-2 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-3 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-4 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-5 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-6 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-7 { BORDER-RIGHT: #517788 1px solid; BORDER-TOP: #517788 1px solid; BACKGROUND: #c7d4dc; MARGIN: 3px 2px 0px 1px; OVERFLOW: hidden; BORDER-LEFT: #517788 1px solid; WIDTH: 10px; CURSOR: hand; BORDER-BOTTOM: #517788 1px solid; HEIGHT: 10px }
   .thm-1 { BACKGROUND-POSITION: 2px 2px }
   .thm-2 { BACKGROUND-POSITION: -18px 2px; BORDER-LEFT-COLOR: #a5620c; BORDER-BOTTOM-COLOR: #a5620c; BORDER-TOP-COLOR: #a5620c; BACKGROUND-COLOR: #fec478; BORDER-RIGHT-COLOR: #a5620c }
   .thm-3 { BACKGROUND-POSITION: -38px 2px; BORDER-LEFT-COLOR: #4d3b53; BORDER-BOTTOM-COLOR: #4d3b53; BORDER-TOP-COLOR: #4d3b53; BACKGROUND-COLOR: #bdadc7; BORDER-RIGHT-COLOR: #4d3b53 }
   .thm-4 { BACKGROUND-POSITION: -58px 2px; BORDER-LEFT-COLOR: #688130; BORDER-BOTTOM-COLOR: #688130; BORDER-TOP-COLOR: #688130; BACKGROUND-COLOR: #c1de87; BORDER-RIGHT-COLOR: #688130 }
   .thm-5 { BACKGROUND-POSITION: -78px 2px; BORDER-LEFT-COLOR: #77724a; BORDER-BOTTOM-COLOR: #77724a; BORDER-TOP-COLOR: #77724a; BACKGROUND-COLOR: #bebda0; BORDER-RIGHT-COLOR: #77724a }
   .thm-6 { BACKGROUND-POSITION: -98px 2px; BORDER-LEFT-COLOR: #c54d77; BORDER-BOTTOM-COLOR: #c54d77; BORDER-TOP-COLOR: #c54d77; BACKGROUND-COLOR: #f8c3d0; BORDER-RIGHT-COLOR: #c54d77 }
   .thm-7 { BACKGROUND-POSITION: -118px 2px; BORDER-LEFT-COLOR: #575757; BORDER-BOTTOM-COLOR: #575757; BORDER-TOP-COLOR: #575757; MARGIN-RIGHT: 0.4em; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT-COLOR: #575757 }
  </style>

  <script language="javascript">
    function MainStyleSet(intValue)
    {
     var objThm ;
     var objMainStyle ;
     if(intValue)
     {         
      for(var i= 1; i<= 7;i++)
      {
       if(i == intValue)
       {
        objThm = document.all("thm-" + i);
        if(objThm)
        {
         objThm.className = "thm-"+i+ " on";
        }      
       }
       else
       {
        objThm = document.all("thm-" + i);
        if(objThm)
        {
         objThm.className = "thm-"+i;
        }              
       }    
      }  
      setCookie("MainStyle",intValue);   //存入cookie      
      //更新当前页的样式
      objMainStyle = document.all("lnkMainStyle");
      PageStyleChange(objMainStyle,intValue);
      
      //更新MainPage，下的样式
      if(window.parent.frames("main"))
      {
       objMainStyle = window.parent.frames("main").document.all("lnkMainStyle");       
       PageStyleChange(objMainStyle,intValue);    //设置下面的页面的样式，
      }
      //上层的框架的MainNavigator
      if(window.parent.frames("FlashNavigator") )
      {
       var objFlashNavigator ;
       objFlashNavigator = window.parent.frames("FlashNavigator").document.all("FlashNavigator");
       
       if(objFlashNavigator != null && objFlashNavigator.FlashStyleSet != null)
       {
        objFlashNavigator.FlashStyleSet();
       }       
       //PageStyleChange(objMainStyle,intValue);    //设置下面的页面的样式，
      }
      var objFlash = document.all("FlashBanner");
      if(objFlash != null)
      {
       objFlash.FlashStyleSet();
      }
                      
     }      
    }   
    function  ColorSelectSet()
    {
     var strValue;
     strValue = getCookie("MainStyle");  //获取value值 
     if(strValue == null)
     {
      strValue = 1;
     }    
     MainStyleSet(strValue);  //设置当前的样式     
    }
    //返回cook的value值
    function StyleValueGet()
    {
     var strValue;
     strValue = getCookie("MainStyle");  //获取value值
     return strValue;
    }
    //功能：更新页面的样式表
    function PageStyleChange(objMainStyle,intValue)
    {     
     var strMainStyle ;
     var strStyleUrl ;  //样式表的Url链接
     if(objMainStyle)
     {
      strMainStyle = "MainStyle"+intValue + ".css";  //新的样式表
      strStyleUrl = objMainStyle.href;
      intIndex = strStyleUrl.indexOf("MainStyle");
      if(intIndex > -1)
      {
       strStyleUrl = strStyleUrl.substr(0,intIndex + 9 ) + intValue +".css";
       objMainStyle.href = strStyleUrl;        
      }        
     }
    }
  </script>
  <script language="javascript" src="./JavaScript/MainStyleSelect.js"></script>

  <div id="StyleSelect">
   <ul>
    <li>
     选择颜色:
    </li>
    <li id="thm-1" class="thm-1" οnclick="MainStyleSet('1');">
    </li>
    <li id="thm-2" class="thm-2" οnclick="MainStyleSet('2');">
    </li>
    <li id="thm-3" class="thm-3" οnclick="MainStyleSet('3');">
    </li>
    <li id="thm-4" class="thm-4" οnclick="MainStyleSet('4');">
    </li>
    <li id="thm-5" class="thm-5" οnclick="MainStyleSet('5');">
    </li>
    <li id="thm-6" class="thm-6" οnclick="MainStyleSet('6');">
    </li>
    <li id="thm-7" class="thm-7" οnclick="MainStyleSet('7');">
    </li>
   </ul>
  </div>


 MainStyleSelect.js:
 //功能：输出不同的样式
 var strAppRootPath ;   //项目的跟路径
 var intIndex ;     //下标索引 
   
 var strMainStyle = "MainStyle.css";  //Css样式表的名称
 var strValue = "";      //获取cookie值中存入的css样式

 
 strAppRootPath = location.pathname.toLowerCase();
 intIndex = strAppRootPath.indexOf("/",1);
 if(intIndex > -1)
 {
  strAppRootPath = strAppRootPath.substr(0,intIndex+1); //项目安装的根目录
 }
 strValue = getCookie("MainStyle");   //获取Css样式值
 if(!strValue )
 {
  strValue = 1;
 }
 strMainStyle  = strAppRootPath  +"MainStyle"+ strValue + ".css"
 strMainStyle = "<LINK id=/"lnkMainStyle/" href=/""+strMainStyle+"/" rel=/"stylesheet/">";
 document.write(strMainStyle); 
  

xuyabao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html鼠标点击后变换样式,css鼠标样式（css鼠标点击切换样式）
weixin_39717825的博客
06-04 4152
css鼠标样式新浪博客代码个性化CSS鼠标样式网址完整问题：新浪博客代码个性化CSS鼠标样式网址好评回答：进入控制面版→维护首页内容→自定义空白面版→输入方框内代码，有的人给出的代码还要打字,我的不需要,其实在代码里加入一个就可以了,因为这个东西是HTML代码里的空格,相当于有内容了.---- ...
js函数改变html样式,JavaScript改变CSS样式的方法汇总
weixin_28910825的博客
06-26 1263
JavaScript允许你即时的改变CSS样式，这样就可以将用户的眼球吸引到你想他们关注的地方上，并且提供较好的交互体验给力 。JavaScript修改CSS有4种方法：修改节点style(内联样式)；改变节点class或id；写入新的css；替换页面中的样式表。个人不建议使用后两种方法，几乎所有的功能都可以通过前两种方式实现，并且代码更加清晰、易理解。后面还会说说如何获取元素的真实样式和一个表单...
QT 样式表的使用 -- 多种设置样式的方法
qq_27278957的博客
07-31 1678
一、简述 我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面，关于如何使用样式表的资料也很多，样式表的使用方法也千变万化。为了搭建一个漂亮的界面那么必须学会如何使用样式表，Qt帮助文档中提供了非常好的例子以及详细介绍，非常适合学习。同时呢，也不能光看文档中是如何设置样式，我们要亲自动手做一遍才能理解得更加透彻，好了闲话不多说，下面就我在日常开发过程中对样式表的使用做一下简单的总结。 ...
Qt 之 样式表的使用——设置样式的方法
热门推荐
前行之路还需前行
03-09 4万+
一、简述我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面，关于如何使用样式表的资料也很多，样式表的使用方法也千变万化。为了搭建一个漂亮的界面那么必须学会如何使用样式表，Qt帮助文档中提供了非常好的例子以及详细介绍，非常适合学习。同时呢，也不能光看文档中是如何设置样式，我们要亲自动手做一遍才能理解得更加透彻，好了闲话不多说，下面就我在日常开发过程中对样式表的使用做一下简单的总结。二、开始总...
【Qt】样式表的使用——设置样式的方法
weixin_41838721的博客
03-07 4569
Qt 之 样式表的使用——设置样式的方法一、简述二、开始总结1、先谈谈我们设置样式有几种方法（a）、最简单，也是最直接——在Qt Designer 中添加样式（b）、在代码中添加样式（c）、将样式写在文件中，通过读取文件的方式设置样式2、再谈谈这几种设置样式方法的优缺点（a）、最简单，也是最直接——在Qt Designer 中添加样式（b）、在代码中添加样式（c）、将样式写在文件中，通过读取文件的方式设置样式个人建议常见样式 一、简述 我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面，关于如何使
html通过id设置css样式,JavaScript修改style,id,class等css属性样式方法总结
weixin_39865204的博客
06-20 5709
JavaScript允许你即时的改变CSS样式，这样就可以将用户的眼球吸引到你想他们关注的地方上，并且提供较好的交互体验给力 。JavaScript修改CSS有4种方法：修改节点style(内联样式)；改变节点class或id；写入新的css；替换页面中的样式表。几乎所有的功能都可以通过前两种方式实现，并且代码更加清晰、易理解。后面还会说说如何获取元素的真实样式和一个表单中的注意事项。1、修改节点...
Qt样式表：切换主题
友善啊，朋友的博客
03-05 2909
首先推荐这位大佬的软件《qss设计器》：QT-智能QSS设计器 这个工具可以切换不同的主题，这个软件没有开源不过可以根据一些方法实现和它一样的切换主题功能。 比如一个按钮，通常状态下设置以下三种颜色：普通的颜色、按下的颜色、鼠标滑过的颜色就可以具备动态的交互效果： 此按钮的样式设置如下： QPushButton { border-style: none; border: 0px; color: #FFFFFF; padding: 5px; border-radius:5px; b
微信小程序之组件样式在不同页面的变换
weixin_43399226的博客
10-18 3152
微信小程序之组件样式在不同页面的变换 在开发微信小程序时，就如同封装函数一样会把重复用到的一部分代码使用组件来完成，这样一个组件可以在不同的页面进行使用，节省了很多时间和代码。 但是在有些情况下同一个组件在不同页面使用中会呈现不同的样式，这种时候就需要一个选择器进行多种样式的定义。 前几天在制作一个搜索框时就遇到了这种情况：同一个组件在两个页面使用，但是如果使用同一个选择器进行样式定义那么只有组件...
Vue.js实例01—实现点击列表变换样式
qq_41905795的博客
02-06 1361
一、需求 默认样式为黑色字体，变换后的样式为蓝色字体、加粗、字体变大 开始时默认选中列表的第一项 之后随机点击列表的某一项时，该列表项就变换样式，其余的恢复初始状态 二、效果图 三、源代码 1.第一种方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表点击变色demo1</title> <!-- 引入项目里的Vue.js文件 --&g
如何修改css样式名称style,JavaScript修改style,id,class等css属性样式方法总结
weixin_39640085的博客
08-04 2866
JavaScript允许你即时的改变CSS样式，这样就可以将用户的眼球吸引到你想他们关注的地方上，并且提供较好的交互体验给力 。JavaScript修改CSS有4种方法：修改节点style(内联样式)；改变节点class或id；写入新的css；替换页面中的样式表。几乎所有的功能都可以通过前两种方式实现，并且代码更加清晰、易理解。后面还会说说如何获取元素的真实样式和一个表单中的注意事项。1、修改节点...
行业分类-设备装置-一种界面样式变换方法及装置.zip
09-11
行业分类-设备装置-一种界面样式变换方法及装置
fourier:JavaScript中的傅立叶变换
04-28
每种数据类型，向量大小和编码样式具有一个功能 fourier . custom . fft_ < type> _ < size> _ < style > 数据类型： f32或f64 矢量大小： 16 ， 32 ，... 1048576 编码样式：“原始”或asm
SAM:正式实施“仅涉及样式”
03-05
在这项工作中，我们提出了一种图像到图像的转换方法，该方法可以学习将真实的面部图像直接编码到经过预先训练的无条件GAN（例如StyleGAN）的给定衰落偏移下的潜在空间中。 我们采用了预训练的年龄回归网络，用于...
rectangle:通用，平行四边形样式矩形库
06-01
一种描述和操作任何 2D（也旋转）矩形的方法。 每个矩形只能用 3 个点来完全描述——我称之为原点（左上）、右（右上）、下（左下）。 其他一切都是基于这些点计算的。 矩形有它的初始（这里称为隐藏）维度，然后...
ios-Clock for iOS (秒针两种旋转样式).zip
07-11
变换秒针旋转样式 clock.secRoll = NO / YES; 样式设置方法 [self setClockBackgroundImage:[UIImage imageNamed:@"xxx"].CGImage]; [self setSecHandImage:[UIImage imageNamed:@"xxx"].CGImage]; [self ...
ASP.NET中物理路径和虚拟路径
03-14 5378
ASP.NET中物理路径和虚拟路径//Request.CurrentExecutionFilePath; 当前请求的虚拟路径 是这种格式:/虚拟目录名/admin/index.aspx//Request.ApplicationPath    //获取服务器上 ASP.NET 应用程序的虚拟应用程序根路径。/虚拟目录名(应用程序名)以上都是虚拟目录中的文件路径，即是IIS中的路径。要得到真真
html按钮弹出窗口选择值返回父窗口(实例)
03-12 4475
html按钮弹出窗口选择值返回父窗口 //弹出选择查询窗口function LineQueryOpen(){ var objLine; objLine = window.showModalDialog(../../Common/Line/LineSelectFrame.htm, ,dialogWidth:500px; dialogHeight:400px;); if(objLine
文本框回车换行及html标记等保存方法
03-14 2717
文本框回车换行及html标记等保存方法文本框内输入替换回车换行等string strAnswer = txtAnswerContent.Text;strAnswer = Server.HtmlEncode(strAnswer).Replace(((char)13).ToString(),"").Replace(((char)32).ToString()," "); 
上传图片附件到数据库(Oracle)实例
03-12 1622
上传图片附件到数据库(Oracle)实例一、类   /**////         /// 功能：图片附件的上传        ///         ///         public int FileAttachmentAdd()        ...{            int intAttachmentID;            intAttachmentID = 0;
vue 通过websocket获取新值时变换新值样式
最新发布
05-24
要实现通过 WebSocket 获取新值并变换新值样式，一种简单的方法是在 Vue 组件中使用 computed 属性监听 WebSocket 返回的新值，然后根据新值的变化更新组件的样式。 首先，在 Vue 组件的 created 生命周期中创建 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值