HTML DOM Object用法及代码示例

Object对象仅表示HTML <object>元素。我们可以使用getElementById()访问任何<object>元素；还可以使用createElement()创建对象元素；方法。

用法:

用于访问Object元件
```
document.getElementById("id"); 
```
它用于创建目的元件
```
document.createElement("object");
```

属性值：

属性	描述
align	用于设置或返回对象的对齐方式
archive	它用于设置或返回一个字符串，这对于实现归档函数很有用
border	用于设置或返回对象周围的边框
code	它用于设置或返回已编译的Java类文件的src url。
codeBase	用于设置或返回组件的URL
data	用于设置或返回资源的URL
form	用于返回父表单的参考
height	用于设置或返回对象的高度
hspace	设置或返回水平边距
name	设置或返回对象的名称
standby	它用于在加载对象时设置或返回消息
type	用于设置或返回下载数据的内容类型
useMap	用于设置或返回客户端图像图的名称
vspace	设置或返回垂直边距
width	用于设置或返回对象的宽度

示例1：访问对象元素并返回资源的URL

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <object id="myobject"
                width="400" 
data="https://media.geeksforgeeks.org/wp-content/uploads/geek-8.png"> 
        </object> 
  
        <p>Click the button to get  
          the URL of the embedded file.</p> 
  
        <button onclick="Geeks()"> 
          Click it 
        </button> 
  
        <p id="gfg"></p> 
    </center> 
    <script> 
        function Geeks() { 
            
            // Accessing Object element. 
            var x =  
                document.getElementById( 
                  "myobject").data; 
            
            document.getElementById( 
              "gfg").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

示例-2：使用document.createElement创建对象元素。

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
  
        <p>Click the button to create an  
          Object element with an embedded file.</p> 
  
        <button onclick="Geeks()"> 
          Click it 
        </button> 
  
        <p id="gfg"></p> 
  
        <script> 
            function Geeks() { 
                
                // Creating object element. 
                var x = 
                    document.createElement( 
                      "OBJECT"); 
                
                // Set data of the OBJECT. 
                x.setAttribute("data",  
"https://media.geeksforgeeks.org/wp-content/uploads/geek-8.png"); 
                
                x.setAttribute("width", "400"); 
                x.setAttribute("height", "100"); 
                document.body.appendChild(x); 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

支持的浏览器：

谷歌浏览器
火狐浏览器
Edge
Safari
Opera

相关用法

注：本文由纯净天空筛选整理自Sabya_Samadder大神的英文原创作品 HTML | DOM Object Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。