crop_rotate
Run
<!DOCTYPE html> <html> <head> <title> HTML | DOM clientLeft Property </title> <style> h1 { color: green; font-size: 35px; } #myid { height: 100px; width: 350px; padding: 20px; margin: 25px; border-left: 10px solid coral; border-top: 15px solid blue; background-color: green; } </style> </head> <body> <center> <h1>CloseTag</h1> <h2>DOM clientLeft Property </h2> <div id="myid"> <p style="color:white;font-size:25px;"> CloseTag </p> <p id="sudo" style="color:white;"></p> </div> <button onclick="myfun()">Submit</button> <script> function myfun() { var w = document.getElementById("myid"); // Using clientTop property var x = "Border-left-Width is: " + w.clientLeft + "px<br>"; document.getElementById("sudo").innerHTML = x; } </script> </body> </html>
PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCg0KPGhlYWQ+DQoJPHRpdGxlPg0KCQlIVE1MIHwgRE9NIGNsaWVudExlZnQgUHJvcGVydHkNCgk8L3RpdGxlPg0KCTxzdHlsZT4NCgkJaDEgew0KCQkJY29sb3I6IGdyZWVuOw0KCQkJZm9udC1zaXplOiAzNXB4Ow0KCQl9DQoJCQ0KCQkjbXlpZCB7DQoJCQloZWlnaHQ6IDEwMHB4Ow0KCQkJd2lkdGg6IDM1MHB4Ow0KCQkJcGFkZGluZzogMjBweDsNCgkJCW1hcmdpbjogMjVweDsNCgkJCWJvcmRlci1sZWZ0OiAxMHB4IHNvbGlkIGNvcmFsOw0KCQkJYm9yZGVyLXRvcDogMTVweCBzb2xpZCBibHVlOw0KCQkJYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47DQoJCX0NCgk8L3N0eWxlPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCg0KPGJvZHk+DQoJPGNlbnRlcj4NCgkJPGgxPkNsb3NlVGFnPC9oMT4NCgkJPGgyPkRPTSBjbGllbnRMZWZ0IFByb3BlcnR5IDwvaDI+DQoNCgkJPGRpdiBpZD0ibXlpZCI+DQoJCQk8cCBzdHlsZT0iY29sb3I6d2hpdGU7Zm9udC1zaXplOjI1cHg7Ij4NCgkJCQlDbG9zZVRhZw0KCQkJPC9wPg0KCQkJPHAgaWQ9InN1ZG8iIHN0eWxlPSJjb2xvcjp3aGl0ZTsiPjwvcD4NCgkJPC9kaXY+DQoJCTxidXR0b24gb25jbGljaz0ibXlmdW4oKSI+U3VibWl0PC9idXR0b24+DQoJCTxzY3JpcHQ+DQoJCQlmdW5jdGlvbiBteWZ1bigpIHsNCgkJCQl2YXIgdyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteWlkIik7ICAgDQogICAgICAgICAgICAgICAgLy8gVXNpbmcgY2xpZW50VG9wIHByb3BlcnR5DQogICAgICAgICAgICAgICAgdmFyIHggPSAiQm9yZGVyLWxlZnQtV2lkdGggaXM6ICIgDQogICAgICAgICAgICAgICAgKyB3LmNsaWVudExlZnQgKyAicHg8YnI+IjsNCiAgICAgICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgic3VkbyIpLmlubmVySFRNTCA9IHg7DQoJCQl9DQoJCTwvc2NyaXB0Pg0KDQo8L2JvZHk+DQoNCjwvaHRtbD4=