发表新帖
发表新帖

How to change HTML Object element data attribute value in javascript

前端 未结
关注
6 963
清酒与你
清酒与你 2020-11-30 07:34

How do you change HTML Object element data attribute value in JavaScript?

Here is what i am trying 



        
                      

              相关标签:
       

      
      
      

        

          6条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  难免孤独        
                
              
    
                            
    
                2020-11-30 07:58
              
    
            
    
            
    
                                                                       

    and in jquery:
    


    $('element').attr('some attribute','some attributes value')

    


    i.e
    


    $('a').attr('href','http://www.stackoverflow.com/')

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  渐次进展        
                
              
    
                            
    
                2020-11-30 08:05
              
    
            
    
            
    
                                                                       

    document.getElementById("PdfContentArea").setAttribute('data', path);

    


    OR
    


    var objectEl = document.getElementById("PdfContentArea")

objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  闹比i        
                
              
    
                            
    
                2020-11-30 08:07
              
    
            
    
            
    
                                                                       

    In JavaScript, you can assign values to data attributes through Element.dataset.
    


    For example:
    


    avatar.dataset.id = 12345;

    


    Reference:
https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  孤城傲影        
                
              
    
                            
    
                2020-11-30 08:08
              
    
            
    
            
    
                                                                       

    The following code works if you use jquery
    


    $( "object" ).replaceWith('<object data="http://www.google.com"></object>');

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  情书的邮戳        
                
              
    
                            
    
                2020-11-30 08:13
              
    
            
    
            
    
                                                                       

    This works:
    


    <html>
<head></head>
<body>

<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" width="100%"></object> 

<script type="text/javascript">
  var element = document.getElementById("htmlFrame"); 
  element.setAttribute("data", "attributeValue"); 
</script>

</body>
</html>

    


    If you put this in a file, open in it a web browser, the javascript will execute and and the "data" attribute + value will be added to the object element.
    


    Note:  If you simply look at the HTML source, you wil NOT see the attribute. This is because the browser is showing you the static source sent by the webserver, NOT the dynamically rendered DOM. To inspect the DOM, use a tool like Firebug. This will show you what DOM the browser has rendered, and you will be able to see the added attribute.
    


    Using Firefox + Firebug or Google Chrome, you can right click on a part of a page and do "Inspect Element". This will bring up a view of the rendered DOM.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  独厮守ぢ        
                
              
    
                            
    
                2020-11-30 08:20
              
    
            
    
            
    
                                                                       

    The behavior of host objects <object> is due to ECMA262 implementation dependent and set attribute by setAttribute() method may fail.
    


    I see two solutions:
    


      

    1. soft: element.data = "http://www.google.com";
      2. 

    2. hard: remove object from DOM tree and create new one with changed data attribute.
      3. 

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          

        

      

       
      
    
    

          
 
     
 

        
热议问题