DOM脚本设置样式

最新推荐文章于 2024-06-30 10:06:58 发布
最新推荐文章于 2024-06-30 10:06:58 发布
阅读量508 收藏
点赞数
文章标签： currentStyle style属性 defaultView getComputedStyle className
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wisdom_qiu/article/details/52937928
版权

       currentStyle，getComputedStyle


1. 网页由三层信息构成的一个共同体：

           1）结构层（由HTML或XHTML之类的标记语言创建）

           2）表现层（由css负责完成，页面呈现的效果）

            3）行为层（负责内容该如何响应事件这个问题）

以下例子皆在此背景下：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式设置</title>
	<style>
		#box {
			width: 100%;
			height: 100px;
			color: #fff;
			font-size: 30px;
			border: 1px solid navy;
		}
	</style>
</head>
<body>
	<div id="box" style="background-color: red;">样式设置</div>
	
</body>
</html>


       2.style属性：每一个元素节点都会有一个style属性，style属性包含元素的样式，查询这个样式将会返回一个 

           对 象，而不是一个简单的字符串。样式都存放在这个style对象的属性里。

            
             var myDiv = document.querySelector("#box");
	     console.log(myDiv.style);//获取CSSStyleDeclaration对象
3.获取样式：
1）element.style.property(property名字中，不管有多少个字符，DOM一律采用驼峰命名法 例如：fontSize)
 
    myDiv.style.fontSize = "orange";
但是上述的方法，局限性很大，通过style属性只能获取行间样式（内嵌样式），在外部声明的样式不会进入style对象，即使是在heade标签内声明的样式也会如此。
2）使用js操作获取样式：
IE浏览器：element.currentStyle方法
其它:getComputedStyle(elem , peroperty)方法 
        //IE浏览器
		console.log("IE浏览器下获取width值" + myDiv.currentStyle['width']);
		// 标准浏览器 window.getComputedStyle(element,false)["color"]; false处可以用null
		console.log("标准浏览器获取width值" + window.getComputedStyle(myDiv,false)['width']);
3）兼容浏览器的方法
 
       //兼容浏览器获取样式
		function getStyle(elem , name){
			//name是指属性名
<span style="white-space:pre">		</span>if(){
<span style="white-space: pre;"></span><pre name="code" class="html" style="font-size: 14px; text-indent: 56px;"><span style="white-space:pre">			</span>if(elem.currentStyle){
				<span style="white-space:pre">	</span>return elem.currentStyle[name];
			<span style="white-space:pre">	</span>}else{
				return window.getComputedStyle(elem , false)[name];
			<span style="white-space:pre">	</span>}
<span style="white-space: pre;">		</span>  }
 
  
	    }
 
 
 
 4）DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式(做到全部IE和标准都兼容)。
  
 
console.log(document.defaultView.getComputedStyle(myDiv , false));
 
 
 
  

 

 
 3.设置样式： 

 

 
 1）style属性都是可读写的，可以使用赋值的方法 

 

 
 2）在js中可以使用元素节点的className属性进行修改样式，它是一个可读/可写的属性。凡是元素节点都有这个属性，可以直接给它赋值，但是是替换所有类，而不是追加。 

 

 
 
 

 


                

        

        

    

  


    

      

        

            

              
                
                  Wisdom_Qiu
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
通过DOM脚本去设置样式信息

				
			

			

				

					09-05
				

			

		

		

			
				
DOM（Document Object Model）是网页内容的结构化表示，它允许通过编程...只有在CSS无法满足需求时，才应考虑使用DOM脚本进行样式设置。而且，当使用DOM脚本时，尽量将样式信息封装在CSS类中，以利于后期的维护和扩展。

			
		

	



                

              
                



	

		

			

				
					
dom-scripter:在 html 文档中注入删除脚本、样式表和 jsonld 文档

				
			

			

				

					05-31
				

			

		

		

			
				
在 html 文档中注入/删除脚本、样式表。 安装 npm install dom-scripter 进口 根据您的用例，有不同类型的分发。 本质上，该包可以通过 require 导入：   const DOMScripterLib = require ( 'dom-scripter' )  或...

			
		

	



                


  
              

                


	

		

			

				
					
【使用 DOM】为DOM元素设置样式

				
			

			

				

					weixin_30416871的博客
				

				

					08-16
					
					304
					
				

			

		

		

			
				
1. 使用样式表
可以通过document.styleSheets属性访问文档中可用的CSS样式表，它会返回一组对象集合，这些对象代表了与文档管理的各个样式表。

每个样式表 都由一个CSSStyleSheet 对象代表，它提供了一组属性和方法来操作文档里的样式。


1.1 获得样式表的基本信息
第一步是获得定义在文档中的样式表的一些基本信息。

<!DOCTYPE h...

			
		

	





	

		

			

				
					
DOM-设置样式

				
			

			

				

					java_zhaoyanli的专栏
				

				

					03-01
					
					435
					
				

			

		

		

			
				
new document 
  
	
		#d1{
			width:100px;
			height:100px;
			background-color:red;
		}

		.test{
			background:yellow;
		}
	
	
		function changeStyle(){
			//1、获取样式表对象
			var sheets = document.styleS

			
		

	



		

			
		



	

		

			

				
					
javascript学习-DOM设置元素的样式

				
			

			

				

					qq_43368682的博客
				

				

					07-21
					
					5020
					
				

			

		

		

			
				
DOM设置元素的样式
1、通过style属性设置修改样式
【注！】此方式是直接设置标签的style属性，设置完后，优先级最高
      <div id="d1">
			helloworld
		</div>
		<script type="text/javascript">
			//1通过style属性设置修改样式
			var d1=document.querySelector('#d1')
			console.log([d1])
			d1.style.wid

			
		

	





	

		

			

				
					
DOM(如何设置元素样式）

				
			

			

				

					qq_43614064的博客
				

				

					11-11
					
					1134
					
				

			

		

		

			
				
语法：注意：styleName，样式的名称必须写成驼峰式，比如：border-left写成borderLeft
实例：
<ul id="list1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ul>
 <script> 
//  设...

			
		

	





	

		

			

				
					
DOM文字设置和元素样式设置

					
最新发布

				
			

			

				

					cai05的博客
				

				

					06-30
					
					447
					
				

			

		

		

			
				
DOM文字设置和元素样式设置

			
		

	





	

		

			

				
					
dominject:通过重复的预防和完成回调支持将脚本和样式注入DOM

				
			

			

				

					05-01
				

			

		

		

			
				
 通过重复的预防和完成回调支持将脚本和样式注入DOM 用法 完整的API文档。  var dominject = require ( 'dominject' ) var element = dominject ( {  type : 'script' ,  url : '//some-url.js' ,  attrs : { } , //...

			
		

	





	

		

			

				
					
Dom修改样式

				
			

			

				

					qq_18344549的博客
				

				

					08-11
					
					481
					
				

			

		

		

			
				
dom修改css样式

			
		

	





	

		

			

				
					
DOM修改样式

				
			

			

				

					嶢崝的博客
				

				

					03-06
					
					307
					
				

			

		

		

			
				
var btn = document.getElementById("btn");
        var div = document.getElementsByTagName("div")[0];
        btn.onclick = function(){
            div.style.background = "pink";
            div.style.width = "300px";
            div.style.height = "300px";

			
		

	





	

		

			

				
					
【学习前端第三十四课】 DOM操作样式

				
			

			

				

					weixin_65729202的博客
				

				

					01-19
					
					964
					
				

			

		

		

			
				
1、如果过要对某一个元素设置css样式，我们可以使用style属性去设置2、如果要获取一个元素的css样式信息，我们可以使用方法，这个方法可以获取当前元素计算之后的所有的样式信息，但是不能赋值3、如果我们要修改内部样式或外部样式表的样式，或新增，或删除，则需要使用到操作内部样式的style标签或外部样式link标签4、如果我们要对某一个元素添加或删除一个class，我们使用classList属性那些看似波澜不惊的日复一日，总有一天会看到坚持的意义，希望这篇博客能帮到你吖ଘ(੭ˊ꒳ˋ)੭✧。

			
		

	





	

		

			

				
					
有哪项方式可以对一个 DOM 设置它的 CSS 样式？

				
			

			

				

					weixin_42856661的博客
				

				

					08-17
					
					1790
					
				

			

		

		

			
				
1.可以使用行内样式 
2.可以使用style标签 
3.可以使用link引入css文件 
4.可以使用js动态修改

			
		

	





	

		

			

				
					
【DOM】DOM操作之如何修改元素的样式_03

				
			

			

				

					青春木鱼的博客
				

				

					05-14
					
					5563
					
				

			

		

		

			
				
DOM操作之如何修改元素的样式，无论修改内联样式还是修改样式表中的样式，都使用：元素.style.css属性名="属性值"来修改、另外，今后只要获得css属性值，都要获得计算后的样式：var style=getComputedStyle(元素对象) ，然后从style中获取对应的css属性值：style.css属性



			
		

	





	

		

			

				
					
js - DOM操作 - 添加样式的三种方法

				
			

			

				

					m0_74417967的博客
				

				

					06-29
					
					4845
					
				

			

		

		

			
				
第一种方法有一个问题就是一不小心容易覆盖元素以前就已经绑定了的样式。第一种方法是最笨重的方法，只适合修改小的样式。注意类名前面不要加点。注意类名前面不要加点。

			
		

	





	

		

			

				
					
JavaScript DOM 操作

				
			

			

				

					qq_60281421的博客
				

				

					03-16
					
					832
					
				

			

		

		

			
				
javaScript的基本操作

			
		

	





	

		

			

				
					
DOM操作元素-样式属性操作

				
			

			

				

					NY_21的博客
				

				

					01-19
					
					2606
					
				

			

		

		

			
				
我们可以通过 JS 修改元素的大小、颜色、位置等样式。element.style            行内样式操作element.className    类名样式操作一、element.style  行内样式操作使用element.style  获得修改元素的样式。更改的结果会变为行内样式。使用方法为： 要修改的元素.element.style.想要更改的样式 = ‘更改的样式’注意：JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor。

			
		

	





	

		

			

				
					
使用dom添加样式

				
			

			

				

					2201_75359473的博客
				

				

					06-29
					
					838
					
				

			

		

		

			
				
querySelector只获取遇到的第一个元素，querySelectorALL获取全部，也是输出数组。DOM：文档对象模型（Document Object Model）,将页面所有的内容表示为可以修改的对象；html元素： <html>= document.documentElement。通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情。它是DOM的入口点，可以从document开始去访问任何节点元素；对DOM的所有操作都是从 document 对象开始的；

			
		

	





	

		

			

				
					
DOM节点操作

				
			

			

				

					m0_74331185的博客
				

				

					10-31
					
					341
					
				

			

		

		

			
				
DOM节点操作

			
		

	





	

		

			

				
					
JavaScript DOM操作表格与样式完全指南

				
			

			

				

					
				

			

		

		

			
				
在JavaScript中，DOM（Document Object Model）是HTML和XML文档的一种编程接口，它允许我们通过脚本语言如JavaScript来动态地访问和修改文档内容、结构和样式。在处理表格时，DOM提供了强大的功能，让我们能够轻松...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值