如何将 CSS 属性应用于 iframe ？

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

句法：

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

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

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

  

    

  

    
        
            
        
  
        
            
        
        
            
        
    

                

                    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。

例子：

  

    

  

    

  

    

        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:

例子 ：

  

    
  
    
  
    

  

  
    
    

        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 标签。

例子：

  

    
        #Iframe {
            border: 3px dotted;
            width: 300px;
            height: 300px;
        }
    
  
    
        window.onload = function () {
  
            // Create a link Element
            // for the css file
            var link = 
                document.createElement("link");
  
            // Set the attributes 
            // for link element  
            link.href = "iframeCss.css";
            link.rel = "stylesheet";
            link.type = "text/css";
  
            // Set the link element at the
            // 'head' of HTML document  
            document.head.appendChild(link);
        }
    

  

    
        Apply CSS to iframe
    
      
    
    
    

  

输出：