All geek questions in one place

Strange styling issues using JavaScript when using DOCTYPE

I am trying to add <div>using JavaScript and then change its width / height / top / left attributes. But when I use XHTML 1 Transitional doctype, it stops working.

This is how I create <div>:

var div=document.createElement("div");
document.body.appendChild(div);
div.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>';

So, initially myDivit is not displayed to the user, since its left and top are off screen

Then, with some click actions, I do the following:

var myDiv=document.getElementById("myID");
myDiv.style.top=200;
myDiv.style.left=200;

This works fine if I did not put doctype in HTML. As soon as I put a doctype, it stops working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

With doctype, it stops taking top / left / width / height values. But if I set the width / height / top / left with units (i.e. Px), then it works fine.

myDiv.style.top="200px";
myDiv.style.left="200px";

, doctype JavaScript ( )?

+3
2

, , doctype ( , doctype).

CSS, . "200px" , 200 . (left, ) lengths "200px" "10em", ( auto inherit). ( CSS 2.1)

myID div:

div.innerHTML = '<div id="myID" style="z-index:9998; ' +
    'border: 1px solid #000000; ' +
    'border-radius:3px;' +
    'position: absolute;' +
    'display: block;' +
    'top:-10000px;' +     // here
    'left:-10000px;' +    // here
    'width:400px;' +      // here
    'height:400px;"' +    // and here
    '></div>';
+4

DOCTYPE , ( XHTML 1.0) - ( quirks, DOCTYPE).

, - (200px, 1.2em ..). , , quirks.

+1

Source: https://habr.com/ru/post/1771662/

More articles:


All Articles