Question

您好我正在以下小页面工作，我有两个按钮，一个用于隐藏文本区域，另一个用于显示它，实际上它们运行良好但是我想要将颜色称为：隐藏在绿色中，在我试过这样做：

from time import sleep
import math

def get_rotated_coordinates(x, y, fi, angle = 'deg'):
    ''' function rotates coordinates x and y for angle fi, variable
    angle tells if angle fi is in degrees or radians, default value
    is 'deg' for degrees, but you can also use 'rad' for radians'''

    if angle == 'deg':
        fi = math.radians(fi)
    elif angle != 'rad':
        raise ValueError('{} is unsuported type for angle.\nYou can use "deg" for degrees and "rad" for radians.'.format(angle))

    k = math.tan(fi)
    denominator = math.sqrt(k**2 + 1)
    x1 = x / denominator
    y1 = k * x1
    x2 = -(y * k / denominator) + x1
    y2 = (x1 - x2) / k + y1

    return x2, y2

x = 100
y = 500
f = 0
while 1:
    y = math.sin(f)*100+y
    x2, y2 = get_rotated_coordinates(x, y, 30)
    print('X: '+str(x2))
    print('Y: '+str(y2))
    f += math.pi/50
    x += 1
    sleep(0.01)

但它不会影响我的按钮的行为，我想欣赏任何修复问题的建议，我创建了以下jsfiddle文件来显示问题：

https://jsfiddle.net/12bkgd4q/9/

Answer 1

background-color是样式属性，颜色green是该样式属性的属性值;作为他们的样式属性，他们应该与style属性一起在其他样式中：

<button class="button buttom2" style="vertical-align:middle; background-color: green;" onclick="hide()"><span>Hide</span></button>

您可能尝试使用但错误记忆的是旧的（现已过时的）bgcolor属性，该属性也会设置元素的背景颜色。

Answer 2

您正在设置background-color= "green";外部样式属性，您需要将其置于样式属性

中

<button class="button buttom2" style="vertical-align:middle;background-color:green" onclick="hide()";><span>Hide</span></button>

JSFIDDLE

Answer 3

翻转背景颜色和JavaScript调用，如下所示：

style="vertical-align:middle; background-color:green;" onclick="hide();"

Answer 4

<强>意见：

声明内联样式的css可行，但最好的方法是使用外部css将样式与内容分开，以及使用unobstrusive javascript绑定事件。

<强> SOLUTION：

将“buttom2”中的拼写错误更改为“button2”。
删除内联样式。（从按钮标签中删除样式属性）。在外部CSS文件中添加所需的css属性。
从按钮标记中删除onclick事件并向按钮添加标识符，以便稍后可以在单独的JS文件中将事件侦听器与jQuery绑定。

CODE SNIPPET

var sTextO = $("#texto");

$("#triggerBtn1").on("click", function() {
  sTextO.show();
});

$("#triggerBtn2").on("click", function() {
  sTextO.hide();
});

body {
  background-color: blue;
}
textarea {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#out1 {
  width: calc(100% - 150px);
  text-align: center;
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  white-space: pre;
  background-color: black;
  padding: 25px;
  border: 25px solid navy;
  margin: 25px;
  box-shadow: 0 8px 16px red;
}
.wrapper {
  text-align: center;
}
.button {
  display: inline-block;
  box-shadow: 0 8px 16px white;
  border-radius: 4px;
  background-color: red;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 25px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  vertical-align: middle
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 28px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button2 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="70" rows="15" id="texto"></textarea>
<div id="out1"></div>
<div class="wrapper">
  <button id="triggerBtn1" class="button button1"><span>Show</span>
  </button>
</div>
<div class="wrapper">
  <button id="triggerBtn2" class="button button2"><span>Hide</span>
  </button>
</div>

更多信息：

JS ：Why is using onClick() in HTML a bad practice?

CSS ：What's so bad about in-line CSS?

Answer 5

将此添加到css

.button2 {
  background: green;
}

这里有一个错字 -

<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color="green" ;><span>Hide</span></button>

更改＆＃34; buttom2＆＃34;的类名到＆＃34;按钮2＆＃34;

Answer 6

应该在按钮标记的style属性中设置颜色。

<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()">

https://jsfiddle.net/Lhe768Ld/

Answer 7

问题是＆＃34; ＆＃34; ，基本上样式标签在垂直对齐之后结束，因此它不识别背景颜色。将它们包括在内部＆＃34; ＆＃34;

希望这可以解决您的问题：

<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()"><span>Hide</span></button>

如何更改以下css按钮的行为？

7 个答案: