月度归档： 2022年6月

使用原始js控制图片dom size

目的使用js操作图片dom让图片在任意窗口大小满屏。

一下是正常代码

[block]

<body>
    <div>
        <img src="./1920x1080.png" alt="waring" >
    </div>
    <script>
        //div标签适配任意屏幕
        var div = document.querySelector('div');
        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;
        div.style.width = WIDTH + 'px';
        div.style.height = HEIGHT + 'px';
        //img标签适配任意屏幕
        var img = document.querySelector('img');
        img.width = WIDTH;
        img.height = HEIGHT;
        //div img标签随屏幕大小变化
        window.onresize = function() {
            WIDTH = window.innerWidth;
            HEIGHT = window.innerHeight;
            div.style.width = WIDTH + 'px';
            div.style.height = HEIGHT + 'px';
            img.width =  WIDTH;
            img.height = HEIGHT;
        }
    </script>
</body>

[/block]

但如果把

img.width =  WIDTH;
img.height = HEIGHT;

改为

img.width =  WIDTH+ 'px';
img.height = HEIGHT+ 'px';
图片无法显示
因为其中width="300px" height="300px"这种写法是不符合w3c规范的属性width、height的值是个非负数，直接写数字即可，如width="300"
用 The W3C Markup Validation Service 检测不会报错
但<img src="./1920x1080.png" alt="waring"  width="300px" height="300px"> 报错