如何使用contenteditable属性调整或编辑html中的按钮？

我有一个按钮，我必须改变它的颜色，大小和名称

我正在使用

属性

在下面的示例中，我可以编辑作为按钮名称的文本内容，但无法更改其样式

<button contenteditable="true">This is editable</button>

这是可编辑的

有什么方法可以改变它的风格吗

---

您不能仅仅通过使用contenteditable更改元素的样式内容可编辑仅用于修改/编辑文本。

是，您可以向按钮添加样式。请在下面找到代码片段

button {
    background-color:#112717;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:2px solid #18ab29;
    color:#ffffff;
    font-family:Arial;
    font-size:14px;
    padding:12px 33px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
button:hover {
    background-color:#23bf2a;
}
button:active {
    position:relative;
    top:1px;
} 

<button contenteditable="true" class="myButton">This is an editable</button>

按钮{
背景色：#112717；
-moz边界半径：8px；
-webkit边界半径：8px；
边界半径：8px；
边框：2px实心#18ab29；
颜色：#ffffff；
字体系列：Arial；
字体大小：14px；
填充：12px 33px；
文字装饰：无；
文本阴影：0px 1px 0px#2f6627；
}
按钮：悬停{
背景色：#23bf2a；
}
按钮：激活{
位置：相对位置；
顶部：1px；
} 
这是一个可编辑的文件

---

或者您可以使用单独的css类进行样式设置。

使用css将使您的样式设置更加简单，但这里有一个简单的方法可以更改按钮的颜色

<button type="button" style= background-color:red >Press Me</button>

按我

我想随按钮名称动态更改其样式。那么是否有任何插件可以动态设置按钮样式？我不知道这是否有效。如果有用的话，试试这个。