javascript 如何锚图像以使文本不移动它？

u91tlkcl 于 2023-01-24 发布在 Java

关注(0)|答案(3)|浏览(92)

TLDR：如何防止img在上面的另一个元素被JS操作时被重新定位。
我正在学习编码入门课程，本周我们创建了一个计算器，它允许用户输入一个数字，并根据这个数字获得总成本（以衬衫为例）。我想在这个计算器下面添加一个.gif，尽管在用户提交数字后屏幕上显示总成本时，.gif会下移。
input/按钮和下面的.gif之间已经有空间了，但是添加到屏幕上的文本会将.gif进一步向下移动。我尝试使用<br clear="top">，认为它可能会从顶部包裹文本以阻止干扰，但似乎没有效果。我也尝试了position: absolute，但也没有效果。在用按钮输入答案时，我把它写成var message = "Your total for "+v+" shirts is $"+total; document.querySelector("#paragraph-1").innerHTML = message;，这条消息是影响. gif的原因。该图像在CSS img{ width: 50%; display: block; margin-left: auto; margin-right: auto;上设置了自动边距。
以下是实时编辑的链接：https://jsfiddle.net/6fom3syt/
感谢您抽出宝贵时间，并感谢您的反馈！

JavaScript

来源：https://stackoverflow.com/questions/75212696/how-can-i-anchor-an-image-so-text-does-not-move-it

3条答案

按热度按时间

whhtz7ly1#

一个简单的方法来解决它：

<p id="paragraph-1">&nbsp</p>

不要将p元素留空。

赞(0）回复(0）举报 2023-01-24

ddarikpa2#

有几种方法可以做到这一点，但最简单的方法是在段落上使用position: absolute。通过将position: relative设置为段落容器，当您在段落上使用position: relative时，后者将直接引用容器，添加bottom: -3rem将其定位在输入下方，添加left和translate将其居中。结果应该是你想要的。

var cost = 9.99;
var subtotal;

document.querySelector("#button-1").onclick = click
//console.log(document);

function click(){
    var i = document.querySelector("#input-1");
    var v = i.value;
    console.log(typeof(v));
    var subtotal = cost*v; //coercion
    var total = addTax(subtotal);
    total = total.toFixed(2);
    var message = "Your total for "+v+" shirts is $"+total;
    document.querySelector("#paragraph-1").innerHTML = message;

    //console.log("button has been clicked", v, subtotal, total);
    if(v==1){
        var message2 = "Your total for "+v+" shirt is $"+total;
        console.log(message2);
        document.querySelector("#paragraph-1").innerHTML = message2
    }
    else{
        console.log(message);
    }
}

function addTax(num){
    //var taxRate = 0.13;
    //var taxAmount = num*taxRate;
    //var total = num+taxAmount;
    var tax = 1.13;
    var total = num*tax;

    //console.log(total);
    return total
}

h1{
    color: antiquewhite;
    text-align: center;
    font-family: 'Georgia', Times New Roman, Times, serif;
}
#container{
    width: 70%;
    margin: auto;
    text-align: center;
    position: relative;
}
#paragraph-1 {
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
}

body{
    background-color: rgb(95, 147, 119);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: antiquewhite;
}
button{
    background-color:rgb(95, 147, 119);
    color: antiquewhite;
    border-color: antiquewhite;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor:pointer;
}
input{
    background-color: rgb(95, 147, 119);
    color:antiquewhite;
    border-color:antiquewhite;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
img{
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "m3.css">
    </head>

<body>
    <div id = "container">
        <h1 id= "mainHeading">module 3: functions</h1>
        <h2>How many shirts would you like to buy?</h2>
        <button id="button-1">submit</button>
        <input id="input-1" type="number">
        <p id="paragraph-1"></p>
    </div>
    <br clear="top">
    <p><img src = https://media3.giphy.com/media/3o6Mb7jQurR1B7mM5G/giphy.gif>
    </p>
    <script src="m3.js"></script>
</body>
</html>