上边距或任何边距移动所有按钮而不是一个按钮.请记住，我无法使用CSS，因为我使用的是网络风暴解释器

我正在尝试单独移动每个按钮而不移动其他元素。正如之前所说，我的问题是，每次我使用 margintop 或 marginleft 时，它都会移动所有内容，每个 botton。请记住，我不能使用CSS，因为我使用的是Jet Brains WebStorm。这是代码。所以你可以看到我在说什么。修改顶部边距和左边距值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gavito Auto</title>
</head>
<body>
<div id="button1">
</div>
<script>
//Buttons
//// BUY CAR PARTS BUTTON
function screen_main_button(name, func, moveX, moveY){
// 1. Create the button
var button = {};
button.name = name;
button.func = func;
button.button = document.createElement("button");
button.button.innerHTML = button.name;
button.button.style.width = "200px";
button.button.style.height = "200px";
button.button.style.marginLeft = moveX;
button.button.style.marginTop = moveY;
button.button.style.backgroundColor = "orange";
// 2. Append to body
var body1 = document.getElementsByTagName("body")[0];
body1.appendChild(button.button);
// 3. Add event handler
button.button.addEventListener ("click", function() {
button.func()
});
}

//BUTTON FUNCTIONS
works = function(){
alert("this is working")
};
//button calls
screen_main_button("Buy Car Parts", works, "370px", "100px");
screen_main_button("Buy A Car", works, "10px", "100px");
screen_main_button("Request A Car Repair", works, "10px", "100px");
</script>
</body>
</html>

该行为的原因是按钮以内联方式显示在 HTML 文档中。如果您想在不干扰其他元素的情况下自由移动按钮，我建议您使用posititionabsolute和top/left.

请记住，最后两个按钮彼此重叠，因为它们具有相同的坐标。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gavito Auto</title>
</head>
<body>
<div id="button1">
</div>
<script>
//Buttons
//// BUY CAR PARTS BUTTON
function screen_main_button(name, func, moveX, moveY){
// 1. Create the button
var button = {};
button.name = name;
button.func = func;
button.button = document.createElement("button");
button.button.innerHTML = button.name;
button.button.style.position = "absolute";
button.button.style.width = "200px";
button.button.style.height = "200px";
button.button.style.left = moveX;
button.button.style.top = moveY;
button.button.style.backgroundColor = "orange";
// 2. Append to body
var body1 = document.getElementsByTagName("body")[0];
body1.appendChild(button.button);
// 3. Add event handler
button.button.addEventListener ("click", function() {
button.func()
});
}

//BUTTON FUNCTIONS
works = function(){
alert("this is working")
};
//button calls
screen_main_button("Buy Car Parts", works, "370px", "100px");
screen_main_button("Buy A Car", works, "10px", "100px");
screen_main_button("Request A Car Repair", works, "10px", "100px");
</script>
</body>
</html>

相关内容

最新更新

热门标签：