<link>标签可以把外部css样式引入HTML页面

<style>元素用于指定嵌入的样式

通过修改link的href属性,改变引入的css样式

function loadStyle(url){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}

修改内部css样式通过修改style内部元素完成

<script>
function loadStyleString(css){
var style = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
style.type = 'text/css';
try
{
style.appendChild(document.createTextNode(css));//兼容标准浏览器
}
catch (ex)
{
style.styleSheet.cssText = css;//兼容IE
}
head.appendChild(style);
}
</script>

 cssText容易是浏览器崩溃

动态样式CSS的更多相关文章

  1. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

  2. js中动态载入css js样式

    js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...

  3. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  4. jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

    比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...

  5. JavaScript 动态插入 CSS

    写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 创建一个 style 对象 使用 stylesheet 的 inser ...

  6. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  7. Less (一种动态样式语言)

    Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...

  8. Javascript高级编程学习笔记(44)—— 动态样式

    动态样式 动态样式和昨天的动态脚本一样,都是一种动态引入外部样式(脚本的方式) 由于样式是由 link 元素引入的,所以动态样式自然也就是动态生成link元素插入文档的方式 不过和动态脚本不同的是,动 ...

  9. AngularJS动态设置CSS

    使用AngularJS动态设置CSS大致有2种思路: 1.通过动态设置class名称 比如先定义2个样式: .show-true{    display:block;} .show-flase{    ...

随机推荐

  1. 读取properties文件的信息

    1.properties配置文件的信息 fcsimage_path=C://FCSImage 2.Java代码 public final class Config { private static f ...

  2. webpack.dev.conf.js

    var utils = require('./utils')var webpack = require('webpack')var config = require('../config') // 一 ...

  3. 微信小程序 wxml中的属性记录

    1. view 标签中的属性 style 中的参数 margin-top:10px;  (向上距离) display : flex;  (display : flex 容器声明) flex-direc ...

  4. Linux磁盘分区与文件系统

    一 Linux磁盘分区与文件系统 在Linux中常见的操作系统有:ext2 ext3 ext4 xfs btrfs reiserfs等文件系统的作用主要是明确磁盘或分区上的文件存储方法以及数据结构,L ...

  5. Oracle Telnet 1521 失败

    作中发现自己的电脑“telnet 127.0.0.1 1521”(注意:不要拼成telnet 127.0.0.1:1521 ) 可以通过,但是使用localhost.主机名来telnet,则失败. 解 ...

  6. Json中不支持任何形式的注释,那我们要怎么解决呢

    Json中不支持任何形式的注释,我们可以使用曲线救国的思路:在对象的定义中添加一个key(comment),其对应的value值就是注释填写的语句. 如: { "name":&qu ...

  7. 操作系统的发展史 day36

    什么是操作系统       可能很多人都会说,我们平时装的windows7 windows10都是操作系统,没错,他们都是操作系统.还有没有其他的? 想想我们使用的手机,Google公司的Androi ...

  8. 如何查看mysql数据库表所使用的引擎(转载)

    我们怎么样才能准确的查看mysql的存储引擎呢,下面我给大家介绍两种正确的方式. 1)正确方式一: SHOW TABLE STATUS from 数据库库名 where Name='表名' 2)mys ...

  9. python bisect 排序模块 二分查找与 bisect 模块

    python 3.6.5 import bisect bisect_list=dir(bisect)print(bisect_list)bisect_list = ['__builtins__', ' ...

  10. iOS.CM5.CM4.CM2

    增量数据计算接口: CC_MDx_Init CC_MDx_Update CC_MDx_Final 全量数据计算接口: CC_MDx