当前位置: 首页>>代码示例>>用法及示例精选>>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。