一键更改 class 变量的值？（最简单的方法）

Question

我正在寻找一种方法来轻松更改其中一个变量的值。有一个浏览器游戏中的聊天，我想让它变高。在开发工具中更改高度即可：

<div class="tsbchat" style="position: relative; width: 100%; height: 160px; margin-bottom: 20px;">

但是我可以制作一个脚本并将其放入书签中，这样我就可以一键更改该值吗？它会是什么样子？我知道这是一个微不足道的问题，但我是菜鸟，你可以删除这个问题，我会在其他地方寻求帮助。提前致谢！

Answer 1

要将 javascript 函数用作书签，您需要使用 bookmarklet。您可以在此处阅读更多相关信息 Bookmarklet。

例如

javascript:( alert(' Hello i am clicked from bookmark '));

将此添加到书签的目的地。因此，只要您单击书签，您就会看到 Hello i am clicked from bookmark 提醒。

你可以这样做

这里的 handleClick 是一个函数，当您单击 div.Than 我们 select 元素 class 名称并更改其样式时将调用该函数。

function handleClick(){
  let element = document.getElementsByClassName('tsbchat');
  element[0].style.height = "1000px"; //chnage to amount you want
}

.tsbchat{
  position : relative;
  width : 100%;
  height : 160px;
  margin-bottom: 20px;
  border: 1px solid black;
 }

<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>

Answer 2

另一种方法是使用 jQuery

function handleClick(){
  $(".tsbchat").css("height", "100px"); //choose the amount you want
}

.tsbchat{
  position : relative;
  width : 100%;
  height : 160px;
  margin-bottom: 20px;
  border: 1px solid black;
 }

<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>

这样你可以让你的 div 变大，但只有一次如果您需要多次使用，请改用此脚本：

function handleClick(){
    $(".tsbchat").css("height", function(){
                        return $(".tsbchat").css() + 100;
                      });

}

注意：不确定这种方式是否必须指定 "px"，但我很确定这有效

Answer 3

最简单的解决方案是输入

document.getElementsByClassName('tsbchat')[0].style.height='600px'

在您的控制台中。

记得加[0]，因为getElementsByClassName returns一个数组

一键更改 class 变量的值？（最简单的方法）

Change value of a class variable with one click? (simplest way)

javascript

class

firefox-addon

一键更改 class 变量的值？ （最简单的方法）

Change value of a class variable with one click? (simplest way)

javascript

class

firefox-addon

一键更改 class 变量的值？（最简单的方法）