1. Method one:
Get the official defined attributes and use them directly:
Element node. Attribute name
Get the attribute value of the corresponding attribute of the element
Example: Get the attribute value of placeholder
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <input id="in" type="text" name="Text" placeholder="please your name"> <script type="text/javascript"> var js = document.getElementById('in') console.log(js.placeholder) </script> </body> </html>
Output:
Modify the attribute value of the corresponding attribute:
Element node. Attribute name = new attribute value
举例:将placeholder="please your name"改为‘please enter your name’
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <button onclick="func()"button</Update>> <input id="in" type="text" name="Text" placeholder="please your name"> <script type="text/javascript"> var js = document.getElementById('in') console.log(js.placeholder) function func(){ js.placeholder = 'please enter your name' console.log(js.placeholder) } </script> </body> </html>
Output:
2. Method two:
Element node.getAttribute ("attribute name")
Get the attribute value of the corresponding attribute of the element
Note: This method can also get custom properties
Example 1: Get the value of the placeholder attribute
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <button onclick="func()"button</Update>> <input id="in" type="text" name="Text" placeholder="please your name"> <script type="text/javascript"> var js = document.getElementById('in') console.log(js.getAttribute('placeholder')) </script> </body> </html>
Output:
Example 2: Get the value of the custom attribute my
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <button onclick="func()"button</Update>> <input id="in" type="text" name="Text" placeholder="please your name" my='abner'> <script type="text/javascript"> var js = document.getElementById('in') console.log(js.getAttribute('my')) </script> </body> </html>
Output:
Modify the attribute value of the corresponding attribute of the element
Element node.setAttribute ("attribute name", "new attribute value")
Examples:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <button onclick="func()"button</Update>> <input id="in" type="text" name="Text" placeholder="please your name" my='abner'> <script type="text/javascript"> var js = document.getElementById('in') console.log('my更改前:'+js.getAttribute('my')) function func(){ js.setAttribute('my','hello world') console.log('my更改后:'+js.getAttribute('my')) } </script> </body> </html>
Output: