关于读取style元素定义样式表的兼容问题

最新推荐文章于 2020-07-22 22:45:52 发布
最新推荐文章于 2020-07-22 22:45:52 发布
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 兼容 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011043843/article/details/28276757
本文介绍了一种使用JavaScript动态修改CSS样式的实现方法，并探讨了不同浏览器间的兼容性问题。通过具体的示例代码，展示了如何利用JavaScript操作样式表，以及针对Firefox浏览器采用cssRules替代rules方法的解决方案。 
<span style="font-size:18px;"></span><pre name="code" class="javascript"><html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>JavaScript Sample</title>
<style type="text/css">
div{color:#FF0000;font-weight:bold;}
p{color:#000000;font-size: 14px;}
</style>
</head>
<body>
<div id="div1">请点击<a href="#">网站链接</a>
</div>
<script type="text/javascript">
    var o = document.styleSheets[0];
    var ol = o.rules[1];
    alert(ol.style.color);
    ol.style.color ="green";
    alert(ol.style.color);
</script>
</body>
</html>







在测试上述代码的时候，在Google和IE中能够正常运行，以下是google中的运行截图：











但是，放在FF（火狐 29）中确不能运行，没有弹框，出现如下错误：




rules方法在FF中是没有定义的，所以将rules方法换成了cssRules()方法，就能正常运行：









cssRules()在Google和IE中式兼容的。




                

        

    

    
  



    



                



	

		

			

				
					
QT高阶-QSS样式表用法大全

				
			

			

				

					yang1fei2的博客
				

				

					06-15
					
					810
					
				

			

		

		

			
				
Qt Style Sheet(QSS)是Qt的一种强大功能，类似于CSS用于网页设计。通过QSS，你可以定义Qt应用程序中的控件的外观和布局，提供一种简洁且灵活的方式来自定义界面。QSS支持大多数CSS2.1的语法和部分CSS3的特性，使得开发者能够利用熟悉的样式表语法来设计GUI。这里介绍一些使用QSS开发的技巧

			
		

	



                

            
              



	

		

			

				
					
JavaScript读取元素的样式style、getComputedStyle()、currentStyle

				
			

			

				

					Hern（宋兆恒）
				

				

					07-27
					
					1705
					
				

			

		

		

			
				
style方法

style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式获，取不了外部的样式，即这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属性。

注意：currentStyle属性和getComputedSty...

			
		

	



              


  
              

                


	

		

			

				
					
document.enableStyleSheetsForSet() 的兼容

				
			

			

				

					hax的技术部落格
				

				

					06-17
					
					157
					
				

			

		

		

			
				
可能有不少同学已经了解 alternate stylesheet ，不过实际上author样式表可以被设定为三类：

1. persistent style sheet：总是应用的样式表
2. preferred style sheet：默认应用的样式表
3. alternate style sheet：其他可选的样式表

我们平时通常写的样式表都是第一类，即persistent st...

			
		

	





	

		

			

				
					
JS获取元素样式

				
			

			

				

					hhthwx的博客
				

				

					11-05
					
					2677
					
				

			

		

		

			
				
在操作DOM元素，我们经常用JS来获取元素的css样式，常见方法总结如下：1. ele.style 这个方法只能获取写在html标签中的style属性的值，即内嵌样式值，而无法获取定义在<style type="text/css">里面的属性 
例如：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <tit

			
		

	



		

			
		



	

		

			

				
					
主流浏览器兼容性问题与解决方案

				
			

			

				

					人生不迷茫的博客
				

				

					11-12
					
					1万+
					
				

			

		

		

			
				
                                                                         主流浏览器兼容性问题与解决方案

　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏...

			
		

	





	

		

			

				
					
最全整理浏览器兼容性问题与解决方案

				
			

			

				

					Mighty_soldiers的博客
				

				

					08-04
					
					1478
					
				

			

		

		

			
				
这里写欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入



    
    
...

			
		

	





	

		

			

				
					
JS来获取全局样式值—style，currentStyle，getComputedStyle() 并解决浏览器兼容性问题

				
			

			

				

					一介白衣入江南
				

				

					06-03
					
					4382
					
				

			

		

		

			
				
一. style对象
style读取样式
语法：元素.style.样式名
还可以设置通过style属性设置的样式
语法：元素.style.样式=样式值
注意：   如果Css的样式值含有-，
		这种名称在JS中是不合法的，比如background-color
		我们在使用是要把这样的名称修改为驼峰命名法
		去掉-，然后将-号后的字母大写

注意：通过style属性设置和读取的都是内联样式，无...

			
		

	





	

		

			

				
					
最全浏览器兼容性问题以及解决方案

				
			

			

				

					起小点
				

				

					07-04
					
					3434
					
				

			

		

		

			
				
常见浏览器兼容性问题与解决方案

　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

　　第一类是精确按照...

			
		

	





	

		

			

				
					
常见浏览器兼容性问题大全

				
			

			

				

					迷你小码农
				

				

					07-22
					
					1608
					
				

			

		

		

			
				
常见浏览器兼容性问题与解决方案　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决...

			
		

	





	

		

			

				
					
关于读取style元素定义样式表的兼容问题实例探讨

				
			

			

				

					09-25
				

			

		

		

			
				
文档中提到的读取style元素定义样式表的兼容问题，主要集中在不同浏览器对于document.styleSheets对象及其属性的支持差异上。  首先，document.styleSheets是一个在DOM中用于表示样式表信息的集合。它包含了页面中...

			
		

	





	

		

			

				
					
javaScript 读取和设置文档元素的样式属性

				
			

			

				

					10-30
				

			

		

		

			
				
因为样式可能来自多个地方，包括内联样式、页面样式表定义或外部链接样式表文件，所以可能需要获取当前实际应用到元素上的样式值。在IE浏览器中，可以使用element.currentStyle.propertyName来获取，而在Firefox及...

			
		

	





	

		

			

				
					
在HTML文档中嵌入CSS的几种方式

					
热门推荐

				
			

			

				

					淡忘~浅思
				

				

					06-03
					
					2万+
					
				

			

		

		

			
				
在HTML中常用以下3种方式定义CSS：Embedding（嵌入式）、Linking（引用式）、Inline（内联式）

			
		

	





	

		

			

				
					
css 字间距离_css 字体字符间距设置

				
			

			

				

					淡忘~浅思
				

				

					05-17
					
					1万+
					
				

			

		

		

			
				
本文简单介绍下css 字间距，使用css来控制字与字之间距离，也叫css字间距方法。

			
		

	





	

		

			

				
					
纯CSS制作冒泡提示框

				
			

			

				

					淡忘~浅思
				

				

					11-18
					
					5364
					
				

			

		

		

			
				
来源：http://www.ido321.com/1214.html

前两天翻译了一篇文章，关于利用css的border属性制作基本图形：http://www.ido321.com/1200.html

在此基础上，今天分享一篇文章给大家，如果利用CSS制作冒泡提示框。

先看2张效果图：

CSS：

/*
   对话气泡
   用法：使用.speech-bubble和.speech-bubble-DIRECTION类
   <div class="speech-bubble speech-bubble

			
		

	





	

		

			

				
					
教你利用iframe在网页中显示天气

				
			

			

				

					淡忘~浅思
				

				

					10-05
					
					4290
					
				

			

		

		

			
				
css：

   1: *{margin:0;padding:0;list-style-type:none;}

   2: a,img{border:0;}

   3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

   4:

   5: /* demo */

   6: .demo{width:800px;margin:0 auto;}

   7: .demo div{margin:40px 0 0 0;}

html：



			
		

	





	

		

			

				
					
CSS换行：word-wrap、word-break和text-wrap区别

				
			

			

				

					淡忘~浅思
				

				

					09-18
					
					3963
					
				

			

		

		

			
				
三、text-wrap：规定文本的换行规则。

        text-wrap是CSS3属性，有4个取值：

        1、text-wrap：normal：只在允许的换行点进行换行。

        2、text-wrap：none：不换行。元素无法容纳的文本会溢出。

        3、text-wrap：suppress：压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

        4、text-wrap：unrestricted：在任意两个字符间换行。

     

			
		

	





	

		

			

				
					
问题：关于贴友的一个书本页面简单布局（html+css）的实现

				
			

			

				

					淡忘~浅思
				

				

					09-08
					
					3943
					
				

			

		

		

			
				
贴友需求：以html+css仿照书本的页面实现布局效果（见图）

html代码：

   1: <!-- 我的博客：http://www.ido321.com -->

   2: <!DOCTYPE HTML>

   3: <html>

   4:     <head>

   5:         <meta http-equiv="content-type" content="text/html;charset=utf-8">

   6:         <title>Test</title>


			
		

	





	

		

			

				
					
怎么解决div覆盖内容却没覆盖的问题?

				
			

			

				

					淡忘~浅思
				

				

					09-21
					
					3687
					
				

			

		

		

			
				
一、在上下结构的div布局中，可能出现div覆盖div，但是内容却没有出现覆盖的现象。看看一个示例

   1: <!DOCTYPE html>

   2: <html>

   3: <head>

   4: <title>DIV与DIV覆盖</title>

   5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   6: <style>

   7: .boxa,.boxb{ margin:0 au

			
		

	





	

		

			

				
					
问题与对策：CSS的margin塌陷（collapse）

				
			

			

				

					淡忘~浅思
				

				

					08-25
					
					3298
					
				

			

		

		

			
				
CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。w3school也规定：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

			
		

	





	

		

			

				
					
qt怎么添加样式表

					
最新发布

				
			

			

				

					04-01
				

			

		

		

			
				
### 如何在 Qt 中应用和添加样式表（QSS）

#### 添加 QSS 样式表的方法

可以通过多种方式在 Qt 应用程序中添加并应用 QSS 样式表。以下是具体方法：

1. **配置编辑器以支持 QSS 文件的语法高亮**  
   在 Qt Creator 的设置中，可以手动配置 `.qss` 文件的支持以便于编写样式表。进入菜单 `工具 -> 选项` 后，在左侧导航栏找到 `Text Editor` 或类似的条目，并通过快速搜索输入框定位到 `text/css` 类型。随后可以在详情区域添加扩展名 `*.qss` 来启用语法高亮功能[^1]。

2. **创建 QSS 文件并将其加入项目资源文件**  
   首先，在项目的根目录或其他合适位置新建一个 `.qss` 文件作为样式表存储载体。接着，在 Qt 开发环境中打开 Resources 资源管理窗口，右键点击空白处选择「添加现有文件」操作，将刚刚建立好的 `.qss` 文件引入至当前工程之中[^3]。

3. **加载 QSS 文件内容到应用程序主题风格里**  
   编写一段 C++ 函数用来读取指定路径下的 QSS 文件数据流，并调用 widget 的 setStyleSheet 方法完成实际的主题切换逻辑实现。例如下面展示了一个典型的函数模板用于更改整个主窗体(MainWindow)或者任意其他容器组件的整体视觉效果:

```cpp
void MainWindow::changeStyle(QString fileName) {
    QString path = ":/qss/" + fileName;
    QFile file(path);
    if (file.open(QFile::ReadOnly)) {
        QString qss = QLatin1String(file.readAll());
        this->setStyleSheet(qss);
        file.close();
    }
}
```

4. **直接嵌入内联 CSS 字符串形式定义控件表现特征**  
除了外部独立维护 .qss 文件外，还可以直接以内建字符串的形式即时设定单个部件或整体界面的表现属性。比如调整按钮(Button)大小颜色等参数可以直接这样处理:

```cpp
QPushButton *button = new QPushButton("Click Me");
button->setStyleSheet("background-color: red; color: white;");
```

以上两种途径都可以有效达成自定义 UI 外观的目的，开发者可以根据实际情况灵活选用其中之一或是混合运用两者优势互补[^4]。

---

#### 动态刷新控件样式的机制说明

当需要实时更新某些特定条件下才会发生变化的部分时，则可能需要用到重新触发 polishevent()事件队列来强制让目标对象立即反映出最新的状态改变情况。通常情况下只需要简单地再次执行一次 setstylesheet 即可达到预期的效果而无需额外考虑太多复杂因素影响效率性能等问题。

---

#### 注意事项

- 确保所有的相对 URL 地址都相对于资源系统的前缀 `/` 正确声明。
- 如果遇到跨平台兼容性问题，请查阅官方文档确认是否存在版本间差异以及解决办法。

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值