คุณสมบัติชื่อผู้ใช้สมอ HTML DOM ที่เชื่อมโยงกับแท็กสมอใช้เพื่อตั้งค่าหรือส่งคืนค่าของส่วนชื่อผู้ใช้ของแอตทริบิวต์ href ชื่อผู้ใช้ถูกป้อนโดยผู้ใช้และมักใช้ในคู่ชื่อผู้ใช้กับรหัสผ่าน ค่าชื่อผู้ใช้ถูกระบุหลังโปรโตคอลและก่อนส่วนรหัสผ่านของลิงก์
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
ส่งคืนคุณสมบัติชื่อผู้ใช้ -
anchorObject.username
การตั้งค่าคุณสมบัติชื่อผู้ใช้ -
anchorObject.username = UsernameValue
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติชื่อผู้ใช้สมอ -
<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor"href="https://john:john123@www.examplesite.com">ExampleSite</a></p>
<p>Click the button to change username</p>
<button onclick="changeUser()">Set User</button>
<button onclick="GetUser()">Get User</button>
<p id="Sample"></p>
<script>
function changeUser() {
document.getElementById("Anchor").username = "Rohan";
}
function GetUser() {
var x=document.getElementById("Anchor").username;
document.getElementById("Sample").innerHTML = x;
}
</script>
</body>
</html> ผลลัพธ์
มันจะสร้างผลลัพธ์ต่อไปนี้ -

เมื่อคลิก “ตั้งค่าผู้ใช้” −

เมื่อคลิก "รับผู้ใช้" -

ในตัวอย่างข้างต้น −
เราได้เชื่อมโยงชื่อผู้ใช้เป็น john และรหัสผ่าน john123 แล้ว
<p><a id="Anchor" href="https://john:john123@www.examplesite.com">ExampleSite</a></p>
จากนั้นเรามีปุ่ม "Set User" และ "Get User" สองปุ่มเพื่อดำเนินการฟังก์ชัน changeUser() และ GetUser() ตามลำดับ
<button onclick="changeUser()">Set User</button> <button onclick="GetUser()">Get User</button>
ฟังก์ชัน changeUser() จะเปลี่ยนชื่อผู้ใช้ที่ระบุในลิงก์ไปยังชื่อผู้ใช้ที่เราระบุ “โรฮัน” ในกรณีของเรา ฟังก์ชัน GetUser() รับชื่อผู้ใช้จากลิงก์ที่มี id Anchor ที่เชื่อมโยงกับมัน และส่งคืน “Rohan” เฉพาะเมื่อมีการเรียก changeUser() ก่อน GetUser() มิฉะนั้น จะเป็น “john”
function changeUser() {
document.getElementById("Anchor").username = "Rohan";
}
function GetUser() {
var x=document.getElementById("Anchor").username;
document.getElementById("Sample").innerHTML = x;
}