📜  如何将 CSS 属性应用于 iframe ?

📅  最后修改于: 2021-09-01 01:53:24             🧑  作者: Mango

iframe是 inline frame的缩写形式。通过使用iframe标签,您可以将其他网页内容以矩形结构显示到 HTML 页面文档中。网页内容可以是任何视频、其他网站、任何图片等。此iframe还具有滚动条和边框,可让文档具有良好的外观和感觉。

句法:

请参考:为了更好地理解,请参阅文章 HTML |内嵌框架

方法 1:有几种技术可以将 CSS 属性应用于 iframe,如下所示。
我们可以通过在iframe标签内使用 CSS 来为iframe使用内联 CSS。

示例: HTML 页面的设计实现如下。



  

    
        How to apply CSS property
        to an iframe?
    

  

    
        
            
        
  
        
            
        
        
            
        
    
                

                    Welcome to GeeksforGeeks                 

            
                

Way to gain knowledge

                
                        
  •                         Learn

  •                     
  •                         Practice                     

  •                     
  •                         Apply to real world                     
  •                 
            
                

                    copyright © geeksforgeeks,                     Some rights reserved                 

            
  

示例:在下面的示例中,iframe 的宽度和高度均为“300px”,边框厚度为“3px”和虚线样式。



  

    

        Apply CSS to iframe     

                                                       

输出:

方法 2:您可以对 HTML 文件中的iframe标记使用内部 CSS。


例子:



  

    
        CSS iframe
    

  

    

  

    

        Apply CSS to ifram     

               

输出:

方法 3:您可以为iframe使用外部 CSS ,即使用外部 CSS 文件。为 CSS 代码创建一个不同的文件,并在iframe标记之前使用 link和 href 标记将其包含在 HTML 文件中。

CSS file: (name of the file iframeCss.css )
#frame {
  border: 3px dotted;
  width: 300px;
  height: 300px;
}
HTML file:

例子 :



  

    
        CSS iframe
    
  
    
  
    

  

  
    
    

        Apply CSS to iframe     

               

输出:

方法四:在这种方法中,JavaScript 代码用于在 HTML 文档的头部添加 CSS 文件链接。使用的方法有:

  • document.createElement():此方法创建一个 HTML 元素来定义元素的名称。
    var g = document.createElement('link');
  • document.appendChild():此方法将指定标记处的任何值或任何节点附加为子值。
    var g = document.createElement('link');
    document.head.appendChild(g)
    

    g是一个孩子,它使用appendChild()方法添加到 head 标签。

例子:



  

    
  
    

  

    

        Apply CSS to iframe     

                   

输出: