button 相关问题

无法更改按钮位置

在此处输入代码我尝试克隆 Twitter 新闻提要。在个人资料部分尝试重新创建编辑个人资料按钮： .editprofile ，但不幸的是，由于某种原因我无法向右移动我的元素，最后...

如何在JavaScript代码中插入HTML div标签？

请帮我在脚本中添加html div标签 ` const 按钮 = this.createElement("div"); Button.classList.add("start_button"); 让边框= 0； 如果（t...

单击时用鼠标左右移动按钮

当我按住 btnn 类的按钮并向左和向右移动鼠标光标时，我希望按钮移动（向左和向右），并在释放鼠标光标时停止移动。 当我按住类 btnn 的按钮并向左和向右移动鼠标光标时，我希望按钮移动（向左和向右），并在释放鼠标光标时停止移动。 <div class="box1 d-flex flex-column justify-content-between h-100"> <div class="target d-flex gap-3"> <div class="block1"> <div class="square1"></div> <div class="square1"></div> <div class="square1"></div> </div> <div class="block1"> <div class="square1"></div> <div class="square1"></div> <div class="square1"></div> <div class="square1"></div> <div class="square1"></div> </div> <div class="block1"> <div class="square1"></div> <div class="square1"></div> <div class="square1"></div> </div> </div> <div class="Targeter"> <div class="btnn"></div> </div> </div> const moveButton = document.getElementById('moveButton'); let isMouseDown = false; moveButton.addEventListener('mousedown', () => { isMouseDown = true; moveButton.style.cursor = 'grabbing'; }); document.addEventListener('mouseup', () => { isMouseDown = false; moveButton.style.cursor = 'grab'; }); document.addEventListener('mousemove', (event) => { if (isMouseDown) { moveButton.style.left = `${event.clientX - moveButton.clientWidth / 2}px`; moveButton.style.top = `${event.clientY - moveButton.clientHeight / 2}px`; } });

Swift：点击按钮后关闭工作表不起作用

单击“Hinzufügen”按钮（德语）后，使用“Fertig”按钮关闭“AddView”不再起作用。然而，如果事先没有点击“Hinzufügen”，则“

Swift：点击按钮后关闭工作表不起作用

单击“Hinzufügen”按钮（德语）后，使用“Fertig”按钮关闭“AddView”不再起作用。然而，如果事先没有点击“Hinzufügen”，则“

单击按钮未在 Google Apps 脚本中执行

我正在创建一个侧栏，用于在谷歌表格中输入数据。脚本中的所有内容似乎都在工作，直到我到达单击执行部分。当我点击按钮时，没有任何反应...

指定相对于放置触发按钮的单元格的范围

我正在尝试构建一个模块化表格，可以在令人作呕的表格周围复制和粘贴。我正在使用一个宏来构建它，该宏将根据与按钮相关的引用来执行任务......

如何编写一个函数来处理多个 onclick 事件，从而切换字段的可见性

我编码时间不长，而且我对 javascript 很陌生。我正在制作一个简单的网页，该网页将显示和隐藏句子的一部分，以达到学习外语的目的。有没有办法写一个

如何修复按钮中 svg 图标周围的空间？

我正在尝试制作一个带有 svg 图标的按钮。但是 svg 图标在按钮中占用了周围的空间，就像周围的边距一样。 我是用这个 svg 代码制作的 - 我正在尝试制作一个带有 svg 图标的按钮。但是 svg 图标在按钮中占用了周围的空间，就像周围的边距一样。 我是用这个 svg 代码制作的 - <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="656.43794" height="512.49902" viewBox="-50.21898,227.25048,656.43794,512.49902"><g fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M579.23627,312.09078l-371.74723,371.74722l-28.9288,28.9288c-15.97694,15.97694 -41.88067,15.97694 -57.8576,0l-28.9288,-28.9288l-115.01012,-115.01012c-15.97694,-15.97694 -15.97694,-41.88067 0,-57.8576c15.97694,-15.97694 41.88067,-15.97694 57.8576,0l115.01012,115.01012l371.74721,-371.74721c15.97694,-15.97694 41.88067,-15.97694 57.8576,0c15.97694,15.97694 15.97694,41.88066 0.00001,57.85759z" id="Path 1"/></g></svg>. 这是我用来操作按钮的 js 代码 - async function submitClicked() { local1 = document.getElementById("submitButton"); if (document.getElementById("textInput").value.trim() !="") { document.getElementById("textInput").style.borderBottom = "3px solid green"; document.getElementById("textInput").disabled = true; local1.style.width = '55%'; await sleep(0.25); local1.innerHTML = `Redirecting <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="checkmark" width="656.43794" height="512.49902" viewBox="-50.21898,227.25048,656.43794,512.49902"><g fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M579.23627,312.09078l-371.74723,371.74722l-28.9288,28.9288c-15.97694,15.97694 -41.88067,15.97694 -57.8576,0l-28.9288,-28.9288l-115.01012,-115.01012c-15.97694,-15.97694 -15.97694,-41.88067 0,-57.8576c15.97694,-15.97694 41.88067,-15.97694 57.8576,0l115.01012,115.01012l371.74721,-371.74721c15.97694,-15.97694 41.88067,-15.97694 57.8576,0c15.97694,15.97694 15.97694,41.88066 0.00001,57.85759z" id="Path 1"/></g></svg>` local1.disabled = true; } else { document.getElementById("textInput").style.borderBottom = "3px solid red"; local1.style.background = 'red'; local1.style.width = "50%"; local1.innerHTML = `Submit <i class="fa-solid fa-xmark"></i>` } } 单击按钮并操作文本时，会触发 SubmitClicked 函数。 我的CSS： #submitButton { display: flex; justify-content: space-evenly; align-items: center; margin-top: 2vh; color: black; fill: black !important; background: var(--theme); border-radius: 1rem; font-family: var(--font1); transition: background ease 0.5s, color ease 0.5s, border-radius ease 0.5s, width ease 0.5s, fill ease 0.5s; height: 10%; width: 40%; border: none; text-align: center; font-size: 3vw; padding: 1rem; } #submitButton:hover { cursor: pointer; } #checkmark { width: 50%; height: 50%; margin: 0; padding: 0; } 我期望的是删除图标周围的额外边距。我也尝试过做margin: 0和padding: 0，但效果不佳。 使用justify-content: space-between代替space-evenly，这样两侧就没有多余的空间了。

当我将鼠标悬停在 1 个按钮上时，我希望在 WPF 中更改另一个按钮的不透明度

我想将鼠标悬停在 1 个按钮上，然后另一个按钮的不透明度缓慢变化（淡出），在 XAML 代码中使用 WPF (C#) 中的动画。 我想要更改的按钮有 x:Name=”

可组合按钮边框描边看起来很奇怪

我正在尝试实现一个带有黑色容器颜色和白色边框的按钮，但是笔划的边缘也在其上添加了黑色，我不知道为什么。 代码： @可组合 有趣的按钮（）{ ...

将按钮移至另一个类 JPanel - Becker Robots

我正在使用贝克尔机器人制作一个两人棋盘游戏。一名随机者和一名人类（我）。 玩家应该点击向上、向下、向左、向右按钮。 到目前为止：我已经创建了 2 个类。一个

Unity 3D IMGUI 控件，Gui。按钮选择/主动使用键盘

对于Unity3D 或需要使用旧的OnGui/Gui.Button。 对于旧项目，我无法使用新的 UI，因为它需要转换整个项目。 我无法解决的问题，我

如何防止按钮在 html 和 css 中按下搜索栏？

我正在创建一个标题。它的左侧有一个标志，右侧有一个搜索栏和相应的搜索按钮。我已经添加了徽标和搜索栏。然后我添加了按钮。 ...

将 ionic 5 升级到 6 导致了这一重大更改：“Config”类型上不存在属性“set”

错误：src/app/app.component.ts:43:19 - 错误 TS2339：“Config”类型上不存在属性“set”。 [错误] [错误] 43 this.config.set('backButtonText', this.translateService.instant('butto...

单击 XPATH 永远不相同的按钮（selenium）

我尝试使用 python 单击反应页面中的按钮，但每次重新加载页面时它都会像令牌一样生成，我不知道如何让它发挥作用 这是按钮： 我尝试使用 python 单击反应页面中的按钮，但每次重新加载页面时它都会像令牌一样生成，我不知道如何让它发挥作用 这是按钮： <button class="mantine-UnstyledButton-root mantine-Button-root mantine-ap0q7a" type="submit" data-button="true"> <div class="mantine-1wpc1xj mantine-Button-inner"> <span class="mantine-1ryt1ht mantine-Button-label">Click to login</span></div></button> 编辑：那个 “mantine-1ryt1ht” 部分是把它弄乱的部分。 Mantine 始终是相同的，但以下部分是每次页面加载时都会更改的部分。 我尝试使用这个，但它不起作用： for button in WebDriverWait(chrome, 1200).until(EC.visibility_of_all_elements_located((By.XPATH, "//button[text()='Click to login']"))): button.click() 这是我完成项目时唯一缺少的东西，我不想使用像 pyautogui 这样的东西，因为我希望它最小化运行。 请将我从缺乏知识的循环中拯救出来。 所以这是一个按钮元素，它将在每个页面上都是常量，因此如果我们使用这样的循环： def find&click(): buttons = driver.find_elements(By.TAG_NAME, 'button') #this will get all the buttons on the page for button in buttons: #this will iterate through all the buttons if button.text == "Click to login" #this will find the one called "Click to login" button.click() #this clicks the button find&click() 所以这个程序会查找按钮的所有 html 标签，即 一旦找到，它将遍历每一个，查看每一个的文本，直到找到带有“点击登录”文本的一个。 一旦找到，它将单击按钮。 这不会依赖任何类名、ids 或 xpath，并且永远不会改变。 现在应该始终可以找到页面上的按钮并单击它。如果您需要任何其他愉快的编码，请告诉我:) button[text() 将不起作用，因为该字符串没有直接的 text() 节点。 您可以尝试以下 XPath： A.使用 text()-node 的显式路径 //button[div/span/text()='Click to login'] 或 B.使用 normalize-space(.)，其中 . 是组合的 text() 节点，标准化空间将消除可选的空白字符。 //button[normalize-space(.)='Click to login'] 或 C.在组合的 text() 节点上使用 contains。 //button[contains(.,'Click to login')]

VBA 按钮将字母插入选定的单元格范围并将其粘贴到不同工作表上的相同单元格范围

在 Sheet1 中，我有一个按钮，可以将字母“U”放入我选择的单元格范围中。 （代码：相交（选择，选择）=“U”）。 Sheet2 具有相同的结构（看起来相同...

如何让按钮点击时改变颜色？

我设置了 3 个按钮，想知道如何让它们在单击时改变颜色。 “是”应该是绿色的 “不”应该是红色的 “也许”也应该是红色的。 我设置了 3 个按钮，想知道如何让它们在单击时改变颜色。 “是”应该是绿色的 “不”应该是红色的 “也许”也应该是红色的。 <!DOCTYPE html> <html lang="en"> <head> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> <title>Trivia!</title> <script></script> </head> <body> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me? <h3> <button id="q1button">Yes</button> <button id="q2button">No</button> <button id="q3button">Maybe</button> </div> </div> </body> </html> 你是这个意思吗？ button:focus { outline: none; border: 1px solid black; } #q1button:focus { background-color: green; color: pink; } #q2button:focus { background-color: red; color: white; } #q3button:focus { background-color: yellow; color: black; } <body> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me?<h3> <button id="q1button">Yes</button> <button id="q2button">No</button> <button id="q3button">Maybe</button> </div> </div> </body> 您可以使用 JavaScript 来完成。我认为这样的东西适合你。 <!DOCTYPE html> <html> <body> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me?<h3> <button id="q1button" onclick="this.style.background = 'green'">Yes</button> <button id="q2button" onclick="this.style.background = 'red'">No</button> <button id="q3button" onclick="this.style.background = 'red'">Maybe</button> </div> </div> </body> </html> 编辑： 设法让所有这些都突出显示。 <!DOCTYPE html> <html> <body> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me?<h3> <button id="q1button" onclick="changeBg(this);">Yes</button> <button id="q2button" onclick="changeBg(this);">No</button> <button id="q3button" onclick="changeBg(this);">Maybe</button> </div> </div> <script> function changeBg(button){ if(button.id == "q1button"){ button.style.background = "green"; document.getElementById("q2button").style.background = "transparent"; document.getElementById("q3button").style.background = "transparent"; } else if(button.id == "q2button"){ button.style.background = "red"; document.getElementById("q1button").style.background = "transparent"; document.getElementById("q3button").style.background = "transparent"; } if(button.id == "q3button"){ button.style.background = "red"; document.getElementById("q1button").style.background = "transparent"; document.getElementById("q2button").style.background = "transparent"; } } </script> </body> </html> 试试这个： <style> .yes:focus { background-color: green; } .no:focus { background-color: red; } .maybe:focus { background-color: yellow; } </style> <button class="yes">Yes</button> <button class="no">No</button> <button class="maybe">Maybe</button> 如果有效请告诉我。 您只需使用 CSS 并对 HTML 进行一些更改即可实现此目的。 在示例中，我使用形状像按钮的标签来触发输入，从而控制按钮的视觉美感。这是在 CSS 中使用 :checked 和相邻的 + 选择器来处理的，以修改 label .button 的颜色。 .inputController { display: none; } .inputController:checked + .button-greenCK { background-color: green; } .inputController:checked + .button-redCK { background-color: red; } .button { font-size: 0.65em; background-color: white; border-radius: 5px; padding: 5px 10px; border: 1px solid lightgrey; box-shadow: 3px 3px 3px rgba(0,0,0,0.25); cursor: pointer; margin-right: 5px; } .button_label {} <html lang="en"> <head> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> <title>Trivia!</title> <script> </script> </head> <body> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Single Choice</h2> <hr> <h3>Do you love me?<h3> <input id="q1button" name="trivia1" class="inputController" type="radio"/> <label class="button button-greenCK" for="q1button"> <span class="button_value">Yes</span> </label> <input id="q2button" name="trivia1" class="inputController" type="radio"/> <label class="button button-redCK" for="q2button"> <span class="button_value">No</span> </label> <input id="q3button" name="trivia1" class="inputController" type="radio"/> <label class="button button-redCK" for="q3button"> <span class="button_label">Maybe</span> </label> </div> </div> <div class="container"> <div class="section"> <h2>Part 2: Multiple Choice</h2> <hr> <h3>Do you love me?<h3> <input id="q4button" name="trivia2" class="inputController" type="checkbox"/> <label class="button button-greenCK" for="q4button"> <span class="button_value">Yes</span> </label> <input id="q5button" name="trivia2" class="inputController" type="checkbox"/> <label class="button button-redCK" for="q5button"> <span class="button_value">No</span> </label> <input id="q6button" name="trivia2" class="inputController" type="checkbox"/> <label class="button button-redCK" for="q6button"> <span class="button_label">Maybe</span> </label> </div> </div> </body> </html> 您可以使用 jQuery 添加存储在数据属性中的类名。这使您可以轻松地直接在 HTML 标记中决定颜色按钮。 请注意，删除颜色类别会将按钮恢复为之前的样子。 $(".answer").on("click", function(){ // Reset other answers. $(".answer").removeClass("red green") // Use the classname stored in the button's data attribute $(this).addClass($(this).data("color")) }) .green{ background: green; } .red{ background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me?</h3> <button class="answer" id="q1button" data-color="green">Yes</button> <button class="answer" id="q2button" data-color="red">No</button> <button class="answer" id="q3button" data-color="red">Maybe</button> </div> </div> 普通 JS 中的相同内容是： let btns = document.querySelectorAll(".answer") btns.forEach(function(btn){ btn.addEventListener("click", function(){ // Reset other answers. btns.forEach(function(btn){ btn.classList.remove("red") btn.classList.remove("green") }) // Use the classname stored in the button's data attribute this.classList.add(this.getAttribute("data-color")) }) }) .green{ background: green; } .red{ background: red; } <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me?</h3> <button class="answer" id="q1button" data-color="green">Yes</button> <button class="answer" id="q2button" data-color="red">No</button> <button class="answer" id="q3button" data-color="red">Maybe</button> </div> </div> 如果您需要在按钮未聚焦的情况下保持颜色，则需要使用 JS 来维护按钮状态。您可以在公共父级上添加一个 click 事件监听器，如果该事件的目标是一个按钮，只需在其上切换 active 类即可。 单击按钮时，可以合理地取消选择 same 部分中的先前选择（如果有），但如果允许并发选择，则删除内部 if 块。 document.body.addEventListener('click', (ev) => { let currentTgt = ev.target; let previousSelected, section; /* a button is clicked? */ if (currentTgt.matches('button')) { /* comment the next 'if' block if multiple buttons * selection is allowed at the same time. * * Is a button already active and that button is not * the same button I've just clicked? Then remove the * active class from that button */ section = currentTgt.closest('.section'); previousSelected = section.querySelector('.active'); if (previousSelected && currentTgt !== previousSelected) { previousSelected.classList.remove('active'); } currentTgt.classList.toggle('active'); } }) .q1button.active { color: green } .q2button.active, .q3button.active { color: red } <div class="section"> <h2>Question #1</h2> <button class="q1button">Yes</button> <button class="q2button">No</button> <button class="q3button">Maybe</button> </div> <div class="section"> <h2>Question #2</h2> <button class="q1button">Yes</button> <button class="q2button">No</button> <button class="q3button">Maybe</button> </div> 作为旁注，如果您计划有多个部分包含多个问题（和按钮），我建议使用类而不是 id 作为按钮 您可以使用 javascript 事件侦听器，并像单击时那样更改颜色。 当按下另一个按钮时，您还必须取消设置其他按钮。 const btn1= $('#q1button'); const btn2= $('#q2button'); const btn3= $('#q3button'); btn1.click( function() { btn1.css('background', 'green'); btn2.css('background', 'initial'); btn3.css('background', 'initial'); }); btn2.click( function() { btn1.css('background', 'initial'); btn2.css('background', 'red'); btn3.css('background', 'initial'); }); btn3.click( function() { btn1.css('background', 'initial'); btn2.css('background', 'initial'); btn3.css('background', 'red'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="jumbotron"> <h1>Trivia!</h1> </div> <div class="container"> <div class="section"> <h2>Part 1: Multiple Choice</h2> <hr> <h3>Do you love me?<h3> <button id="q1button">Yes</button> <button id="q2button">No</button> <button id="q3button">Maybe</button> </div> </div> </body>

在文本标签中显示 Power Apps 复选框控制所选值

我添加了一个四复选框控件并手动设置其 Text 属性。到目前为止，一切都很好，现在，我想通过单击按钮 c...

JS 中的按钮问题

我不断收到错误“未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”）”，并且我无法弄清楚我的代码出了什么问题。 我希望它能运行我的代码