It seems like I am encountering an issue when trying to dynamically create and modify a <div> element using JavaScript. The problem arises when I use the XHTML 1 Transitional doctype.
This is how I am generating the <div>:
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
newDiv.innerHTML = '<div id="myID" style="z-index:9998;border: 1px solid #000000;
border-radius:3px;position:absolute;display:block;top:-10000;left:-10000;width:400;height:400;"></div>';
Initially, the myDiv is positioned outside of the visible screen area.
Later on, when a click event occurs, I execute the following code:
var myDivElement = document.getElementById("myID");
myDivElement.style.top = 200;
myDivElement.style.left = 200;
Everything works smoothly without any issues until I include the doctype declaration in the HTML. Once the doctype is added, the styling modifications fail to take effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
With the presence of the doctype, the assignment of values to properties like top, left, width, and height through JavaScript gets ignored. However, specifying units (such as px) alongside these values resolves the problem.
myDivElement.style.top = "200px";
myDivElement.style.left = "200px";
Therefore, it raises the question of how the doctype impacts the execution of JavaScript functions related to styles and potentially other operations as well.