createStyleSheet简单介绍

最新推荐文章于 2022-07-20 11:24:49 发布

最新推荐文章于 2022-07-20 11:24:49 发布 · 1.5k 阅读

文章标签：

#createStyleSheet

js基础专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个非W3C标准的方法createStyleSheet，该方法允许开发者为IE浏览器创建样式表，参数包括样式表的URL及在styleSheets集合中的索引位置。

简单介绍一下createStyleSheet

/*
@param sURL  可选 
@param iIndex 可选 在styleSheets集合里的索引，默认是最后
*/
document.createStyleSheet(sURL,iIndex)

非W3C标准，只支持IE.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_2245

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

WebBrowser 事件讲解

安卓世界库

11-19

7041

由Internet Explorer 5激发事件如你所知， Internet Explorer像其他COM对象一样激发事件—通过连接点.但实际上Internet Explorer如何激发事件呢?每次 Internet Explorer需要向客户提供关于当前活动状态的信息, Internet Explorer 激发通过DWebBrowserEvents2 连接点激发一个事件. (之前到版本

Extjs-常用函数和事件

11-26

ExtJS 是一个强大的JavaScript库，主要用于构建富客户端应用程序。...以上就是关于ExtJS中常用函数和事件的详细介绍，这些工具和方法使得在JavaScript环境中开发复杂的用户界面变得更加简单和高效。

参与评论您还未登录，请先登录后发表或查看评论

matlab的h5create函数,createStyleSheet()函数的用法

weixin_33755379的博客

03-20

676

本章节介绍一下createStyleSheet()函数的一些相关作用，因为兼容性的问题，它的出现频率较少，但是在一些代码中还是有它身影的出现，下面对它做一下简单介绍，希望能够给需要的朋友带来一定的帮助。此函数可以加载一个外部js文件。如果参数省略，那么就是创建一个元素。语法结构:[JavaScript] 纯文本查看复制代码document.createStyleSheet(url,index)参...

js怎么动态添加css？

yihuliunian的博客

08-07

937

转载自品略图书馆http://www.pinlue.com/article/2019/11/0413/539768436344.html 为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。 IE下，我们可以使用 document.createStyleSheet() 方法；而在非IE浏览器上，就不支持这个方法。可以使用document.styleSheets[0]，但要求网页里必须最少已经加载过一个样式表。后来我找到以下方法，可以在Firefox、Ope..

如何用JavaScript动态建立或增加CSS样式表

yangshen998

12-14

223

1。简单的方法，不管不顾，直接这样就可以： document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解，并不会写入CSS中 'width:300px;height:150px}' + '.类名{……}' + '#ID们{……}' ;//...

用JavaScript动态建立或增加CSS样式表的实现方法

11-22

1、简单的方法，不管不顾，直接这样就可以： document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解，并不会写入CSS中 'width:300px;height:150px}' + '.类名{……}' + '#ID们{……}' ; //完活。我喜欢分号这样写，和指令书写的起始位置对齐比较好一点，尤其是后面有其它语句的时候。 2、完善一点的方法，防止重复添加，可以通过添加样式表ID并对其判断来实现： if (!document.styleSheets['要建立的

javascript动态创建stylesheet

是非一念间

06-03

1008

[size=x-large]应用场景：[/size] ext的grid中row背景和字体颜色，需要通过读取数据库中配置的颜色来渲染grid。 [size=x-large]模块结构：[/size] 已经有一个页面进行配置信息的CRUD了，数据库中存储的值形如：#99CCFF 这部分代码就不贴了。 [size=x-large]曲折的第一步：[/size] 对了本文介绍的模...

JavaScript动态添加与管理CSS样式技巧解析

"这篇文章主要介绍了JavaScript添加CSS样式的几种实用技巧，包括直接操作元素样式、创建内联样式表以及在页面中动态加载外部CSS文件的方法。这些技巧对于开发者来说非常实用，能帮助他们灵活地控制网页的样式表现。...

ExtJSWeb应用程序开发指南(第2版)

07-27

6.5.1 createStyleSheet（） 6.5.2 getRule（） 6.5.3 swapStyleSheet（） 6.5.4 removeStyleSheet（） 6.6 Ext.util.ClickRepeater 6.6.1 click（） 6.6.2 mousedown（） 6.6.3 mouseup（） 6.7 Ext.util....

IE8动态创建CSS

weixin_34337381的博客

05-09

133

IE8动态创建CSS 最近在项目中用到在页面中动态创建ＣＳＳ方法，记录一下方便以后查看一. 在IE下动态创建(网上收集3种方法,最后一个方法未测试成功,具体不知道什么原因) 第一种(此方法很麻烦,需要把字符串拆开写,长一点的话受不了) var sheet = document.createStyleSheet(); sheet.addRule('body', 'backgr...

css用style进行标记,如何使用Javascript创建<Style>标记？

weixin_29938067的博客

08-03

409

下面是一个添加IE风格的脚本createStyleSheet()和addRule()方法到没有浏览器的浏览器：if(typeofdocument.createStyleSheet==='undefined'){document.createStyleSheet=(function(){functioncreateStyleSheet(href){if(typeofhref!=...

用Javascript动态的增加CSS样式的方法

xiaoweids的博客

07-20

1320

IE下，我们可以使用document.createStyleSheet()方法；而在非IE浏览器上，就不支持这个方法。但这种方法却在Safari、Chrome下不可行，原因是style.innerHTML不可写。我再找解决方案，发现用textContent代替innerHTML的方法可行。为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。catch(e){//Firefox,Opera,Safari,Chrome下可行。try{//IE下可行。...

Ext.util工具包详解

Java方向程序员_张帅鹏

01-16

2366

一、Ext.util.CSS 概述：有效的控制样式表，可以多台的删除修改以及交换主要方法： 1.createStyleSheet创建一个css样式在head中的标签 2.getRule根据类名得到一个CSSRule的对象 3.swapStyleSheet引入一个css样式文件并指定ID 4.remov

javascript创建css样式的方法

happyqyt的专栏

05-05

3662

有很多方法可以调用css样式，如使用内嵌样式，在html直接加入样式，给定外部样式文件，在外部样式文件中使用@import url(样式文件路径)，这些都是大家常用的，其实还有就是使用javascript进行样式的定义. 第一种： var style = document.createElement(’link’); style.href = ’style.css’; style.rel = ’stylesheet’; style.type = ‘text/css’; do

不为人知的JS调用样式的方法---document.createElement().addRu...

weixin_34198762的博客

05-17

284

2019独角兽企业重金招聘Python工程师标准>>> ...

不为人知的JS调用样式的方法---document.createElement().addRule(..)

stbrief的专栏

01-17

290

原文：http://www.10000it.net/javascript/20090808/731.html 很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用，如使用内嵌样式，在html直接加入样式，给定外部样式文件，在外部样式文件中使用 @import url(样式文件路径)，这些都是大家常用的，其实还有就是使用javascript进行样式的定义。第一种： ...

摘抄 - 不为人知的JS调用样式的方法---document.createElement().addRule(..)

weixin_34293141的博客

08-24

223

很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用，如使用内嵌样式，在html直接加入样式，给定外部样式文件，在外部样式文件中使用 @import url(样式文件路径)，这些都是大家常用的，其实还有就是使用javascript进行样式的定义。第一种： 1 var style = document.createElement(’link’); 2 style....

js如何动态添加css介绍

xiaoweids的博客

06-25

1076

转自：微点阅读 https://www.weidianyuedu.com为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。IE下，我们可以使用 document.createStyleSheet() 方法；而在非IE浏览器上，就不支持这个方法。可以使用document.styleSheets[0]，但要求网页里必须最少已经加载过一个样式表。后来我找到以下方法，可以在Firefox、Opera下正常运行：var str_css = "body {font-size:12

js如何动态添加css？

ysds20211402的博客

03-19

1486

转自：微点阅读https://www.weidianyuedu.com 为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。 IE下，我们可以使用 document.createStyleSheet() 方法；而在非IE浏览器上，就不支持这个方法。可以使用document.styleSheets[0]，但要求网页里必须最少已经加载过一个样式表。后来我找到以下方法，可以在Firefox、Opera下正常运行： var str_css = "body {fo..

这是我的代码 import React, { PureComponent } from 'react'; import { View, Text, Animated, ImageStyle, StyleProp } from 'react-native'; import { StyleSheet } from 'react-native'; import { createStyleSheet, EmFastImage, getCurrentTheme, rpx } from '@emcd/react-native-treasure-box'; export interface PageBannerFrame1Props { active?: boolean; } interface PageBannerFrame1State {} /** * 组件名称 */ export class PageBannerFrame1 extends PureComponent<PageBannerFrame1Props, PageBannerFrame1State> { animate1 = new Animated.Value(0); animate11 = new Animated.Value(0); animate12 = new Animated.Value(0); animate13 = new Animated.Value(0); animate14 = new Animated.Value(0); constructor(props: PageBannerFrame1Props) { super(props); this.state = {}; } componentDidMount(): void { if (this.props.active) { this.startAnimate(); } } componentDidUpdate( prevProps: Readonly<PageBannerFrame1Props>, prevState: Readonly<PageBannerFrame1State>, snapshot?: any ): void { if (this.props.active && !prevProps.active) { this.resetAnimate(); this.startAnimate(); } } resetAnimate = () => { this.animate1.setValue(0); this.animate11.setValue(0); this.animate12.setValue(0); this.animate13.setValue(0); this.animate14.setValue(0); }; startAnimate = () => { Animated.parallel([ Animated.timing(this.animate1, { toValue: 1, delay: 200, duration: 300, useNativeDriver: false, }), Animated.timing(this.animate11, { toValue: 1, delay: 400, duration: 400, useNativeDriver: true, }), Animated.timing(this.animate12, { toValue: 1, delay: 600, duration: 400, useNativeDriver: true, }), Animated.timing(this.animate13, { toValue: 1, delay: 800, duration: 400, useNativeDriver: true, }), Animated.timing(this.animate14, { toValue: 1, delay: 1000, duration: 400, useNativeDriver: true, }), ]).start(); }; render(): React.ReactNode { const styles = getStyles(); const style1: Animated.WithAnimatedValue<StyleProp<ImageStyle>> = { opacity: this.animate1.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), transform: [ { scaleX: this.animate1.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1], }), }, { scaleY: this.animate1.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1], }), }, ], }; const style11: Animated.WithAnimatedValue<StyleProp<ImageStyle>> = { opacity: this.animate11.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), }; const style12: Animated.WithAnimatedValue<StyleProp<ImageStyle>> = { opacity: this.animate12.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), transform: [ { translateY: this.animate12.interpolate({ inputRange: [0, 1], outputRange: [rpx(50), rpx(0)], }), }, { scaleX: this.animate12.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1], }), }, { scaleY: this.animate12.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1], }), }, ], }; const style13: Animated.WithAnimatedValue<StyleProp<ImageStyle>> = { opacity: this.animate13.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), transform: [ { translateY: this.animate13.interpolate({ inputRange: [0, 1], outputRange: [rpx(50), rpx(0)], }), }, { scaleX: this.animate13.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1], }), }, { scaleY: this.animate13.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1], }), }, ], }; const style14: Animated.WithAnimatedValue<StyleProp<ImageStyle>> = { opacity: this.animate14.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), transform: [ { translateY: this.animate14.interpolate({ inputRange: [0, 1], outputRange: [rpx(50), rpx(0)], }), }, { scaleX: this.animate14.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1], }), }, { scaleY: this.animate14.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1], }), }, ], }; return ( <View style={[ styles.box, { opacity: this.props.active ? 1 : 0, }, ]} > <Animated.Image fadeDuration={0} source={require('./images/frames/1.png')} style={[styles.main, style1]} /> <Animated.Image fadeDuration={0} source={require('./images/frames/1.1.png')} style={[styles.icon1, style11]} /> <Animated.Image fadeDuration={0} source={require('./images/frames/1.2.png')} style={[styles.icon2, style12]} /> <Animated.Image fadeDuration={0} source={require('./images/frames/1.3.png')} style={[styles.icon3, style13]} /> <Animated.Image fadeDuration={0} source={require('./images/frames/1.4.png')} style={[styles.icon4, style14]} /> </View> ); } } export const getStyles = () => { const theme = getCurrentTheme(); return createStyleSheet({ box: { width: 700, height: 520, justifyContent: 'flex-end', }, main: { width: 328, height: 441, alignSelf: 'center', }, icon1: { position: 'absolute', left: 0, bottom: 130, width: 163, height: 130, }, icon2: { position: 'absolute', left: 120, top: 80, width: 118, height: 179, }, icon3: { position: 'absolute', left: 360, top: 20, width: 120, height: 160, }, icon4: { position: 'absolute', right: 75, top: 120, width: 119, height: 182, }, }); };