如何向按钮添加的图像添加填充

Divyang Bhamat

在这里,我有一个名为generate cat的按钮,它可以生成图像,但是我希望图像具有填充。

JS

         function generateCat(){
            var image=document.createElement("img");
            var fluidcontainer=document.getElementById("roma");
           image.src="data:image/jpeg;base64,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"
        
           fluidcontainer.appendChild(image);
}
    

的HTML

<body>
    <div class="fluid-container">
        <div class="container">
            <h1>Cat Generator</h1>
            <button type="button" class="btn btn-success btn-lg" id="cat-gen-btn" onclick="generateCat()">Generate
                Cat</button>
        </div>

        <div class="row">
            <div class="col-lg-12" id="roma"></div>
        </div>


    </div>

    <script src="index.js" async defer></script>

</body>

</html>

的CSS

.fluid-container {
    border: 1px solid black;
    margin-top: 20px;

}
body {
    text-align: center;
}

如果图像是直接从HTML添加的,那么我们可以添加一个属性,然后为其添加填充,但是当我们通过javascript生成图像时如何添加填充?感谢您的帮助和时间!

Love2Code

您可以使用DOM更改CSS样式。您所要做的就是添加image.style.padding = "enter padding in px";在附加图像之前,请放置此代码。您可以使用DOM更改任何属性的CSS样式。只需添加element.style.csspropertyhere =“ value”;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章