前一段时间研究过用JS控制页面浏览器变化时自动调用不同样式的问题,今天在蓝色理想上又看到了类似的代码,特摘抄下来以备后用。
用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:
第一步:在连接样式表的元素里定义一个id,例如
<link href="1.css" rel="stylesheet" type="text/css" id="css">
我定义的id是css。
第二步:写一个js函数,代码如下:
<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
</script>
这个函数的code可以放在页面的任何地方。
第三步:为改变页面的样式表的连接添加一个函数的触发事件,代码如下:
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
该效果在IE和FF下均测试通过,相信大家看完后因该非常明了,利用这个方法我们可以让浏览者自己选择需要显示的样式表,比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是:
在这个例子中函数名function后面的名字不能为links或者link,如果为links或者link,样式表将不被改变,具体什么原因我也不大清楚,可能是javascript的保留字符。
另外如果是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%
(摘自http://www.blueidea.com/tech/web/2008/5980.asp)
分享到:
相关推荐
标题中的“用js动态改变css样式表”是指在网页开发中使用JavaScript来动态修改或切换CSS样式表,从而实现页面样式的实时更新。这一技术在交互式网站设计中非常常见,因为它允许用户根据个人喜好或需求调整页面外观。...
例如,在页面加载后,可以使用 JavaScript 检测当前窗口是否符合媒体查询的条件,然后动态应用相应的样式表。 总的来说,通过 JavaScript 判断页面分辨率并调用不同的 CSS 文件,我们可以有效地实现响应式设计,...
这个函数可以在页面的任何地方调用,只要传入需要切换到的样式表ID(如`'style1'`或`'style2'`)。例如,你可以为一个按钮添加点击事件来触发样式表的切换: ```html ('style1')">切换到样式1 ('style2')">切换到...
在实际开发中,通常会将外部样式表和内部样式表结合使用,以实现页面级别和站点级别的样式管理。 延伸阅读 1. JS掌握CSS样式表 2. JavaScript修改CSS样式style 3. JavaScript动态添加CSS样式表文件 4. 纯CSS+JS写的...
在HTML页面中,可以使用`<xsl:import>`或`<xsl:include>`标签引入XSLT样式表。当浏览器加载XML文档时,会同时加载指定的XSLT文件,然后将XML转换为HTML。这种方式使得前端展示可以根据需要动态地调整样式,提高用户...
在前端开发中,CSS(层叠样式表)用于定义网页的布局和视觉样式,而JavaScript是一种强大的客户端脚本语言,可以动态地改变页面内容和样式。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果。...
本文讨论的主题是使用JavaScript根据iPhone屏幕方向调用不同的样式表。这涉及到JavaScript如何动态地操作样式表链接(link标签),根据设备屏幕方向的变化加载适当的样式规则。该技术点对于前端开发者来说是非常实用...
- 优先级由选择器的特异性决定,内联样式具有最高优先级,其次是内部样式表,然后是外部样式表。 - !important标记可以强制应用某个样式,但应谨慎使用,以避免代码难以维护。 5. 盒模型: - CSS盒模型描述了...
如果Cookie存在,我们就调用`loadStyle`函数加载相应的样式表。 总结一下,动态加载网页样式是通过JavaScript(尤其是jQuery)来实现实时更改CSS样式,提高用户体验。通过结合`jquery.cookie.js`,我们可以将用户的...
2. **CSS (Cascading Style Sheets)**:层叠样式表,用来定义HTML元素在网页上的显示方式。 3. **JavaScript**:一种脚本语言,常用于实现网页上的交互功能。 #### 二、代码分析 1. **HTML结构** ```html ()"> ...
"JS判断浏览器分辨率自动调用不同CSS"是一个实现响应式布局的技术手段,通过JavaScript检测浏览器窗口的分辨率,并据此加载相应的CSS样式表。这种技术尤其适用于多设备兼容性需求高的项目。 首先,我们需要了解...
这个插件允许用户在页面加载后根据需求更换不同的样式表,从而提供更丰富的交互体验和视觉效果。 首先,我们要理解CSS样式表在网页设计中的作用。CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG...
核心组件包括JavaScript、XMLHttpRequest对象、DOM(文档对象模型)以及CSS(层叠样式表)。在"AJAX调用WebService.doc"中,你将学习到如何创建和使用XMLHttpRequest对象发送HTTP请求到WebService,以及处理返回的...
3. **样式与布局优化**:虽然代码中已经使用了`<font class=ttt>`来指定字体样式,但为了更好的视觉效果和响应式设计,可以采用CSS框架如Bootstrap,或者使用纯CSS来控制布局和样式。 4. **错误处理**:添加适当的...
描述中提到的“前端css样板”可能是一个基础样式表,用于设置页面的整体外观和感觉,包括扫描区域的边框、按钮样式等,使得界面更加友好且符合设计需求。 为了实现二维码识别,我们需要一个专门的库。虽然在文件...
- **css** - 这是样式表文件,用于定义页面的布局和视觉效果。 **知识点详解:** 1. **API调用** - 百度翻译API提供了一种方式,允许开发者通过发送HTTP请求获取翻译结果。这个过程通常涉及设置API密钥、选择翻译...
在这个主题中,我们将深入探讨如何在Unigui项目中调用外部JavaScript库和CSS样式表,以及如何创建一个功能完备的左侧导航栏。 首先,调用外部JavaScript库是Unigui应用扩展功能的关键步骤。这通常涉及到在HTML页面...
CSS(层叠样式表)用于美化和布局网页。在滑动门选项卡特效中,CSS主要负责以下任务: 1. 设置选项卡的样式,如颜色、字体、边框等。 2. 定义选项卡的布局,通常使用浮动或Flexbox、Grid布局使选项卡水平排列。 3. ...
3. "1.html", "2.css", "3.js" 等未完全列出的文件,可能是组件的其他组成部分,"1.html" 通常是主页面文件,"2.css" 是样式表文件,定义了组件的外观,而"3.js" 很可能是包含组件逻辑的JavaScript脚本。 在开发...
JavaScript是一种广泛应用于客户端Web开发的脚本语言,它与CSS(层叠样式表)结合使用,可以实现动态交互和丰富的用户体验。 在网页设计中,CSS用于定义元素的外观、布局和结构。而JavaScript则赋予了这些静态样式...