如何在单击按钮上向此 JavaScript 或 HTML 添加 CSS？
[英]How to add a CSS to this JavaScript or HTML on click buttons?
问题描述
我正在尝试创建一个简单的文本编辑器，但我想知道如何正确添加我的样式表，以便按钮具有某种形状和颜色？ 我试过为按钮添加一些 CSS，但它似乎不适用于我需要处理的按钮？
这是我现在拥有的完整代码：
helpstat = false; stprompt = false; basic = true; function thelp(swtch) { if (swtch == 1) { basic = false; stprompt = false; helpstat = true; } else if (swtch == 0) { helpstat = false; stprompt = false; basic = true; } else if (swtch == 2) { helpstat = false; basic = false; stprompt = true; } } function treset() { if (helpstat) { alert("Clears the current editor."); } else { clear = prompt("Are you sure? (y/n)", ''); clear = clear.toLowerCase(); if (clear == 'y') { document.editor.reset(); document.editor.value = ""; } } } function start() { if (helpstat) { alert("Elements that appear at the beginning of the document, including TITLE."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<html>\\n<head>\\n<title></title>\\n</head>\\n<body>\\n"; } else if (stprompt) { for (;;) { twrite = prompt("Title?", ''); if (twrite != "" && twrite != null) { break; } else { prompt("You must enter a title.", 'Ok, sorry.'); } } document.editor.area.value = document.editor.area.value + "<html>\\n<head>\\n<title>" + twrite + "</title>\\n</head>\\n<body "; twrite = prompt("Background color? (blank if none)", ''); if (twrite != "" && twrite != null) { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + "bgcolor=" + twrite + " "; } twrite = prompt("Background image? (blank if none)", ''); if (twrite != "" && twrite != null) { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + "background=" + twrite + " "; } twrite = prompt("Text color? (blank if none)", ''); if (twrite != "" && twrite != null) { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + "text=" + twrite + " "; } twrite = prompt("Link color? (blank if none)", ''); if (twrite != "" && twrite != null) { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + "link=" + twrite + " "; } twrite = prompt("Visited link color? (blank if none)", ''); if (twrite != "" && twrite != null) { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + "vlink=" + twrite + " "; } document.editor.area.value = document.editor.area.value + ">\\n"; } } function end() { if (helpstat) { alert("Adds the the final elements to a document."); } else { document.editor.area.value = document.editor.area.value + "\\n</body>\\n</html>\\n"; } } function preview() { if (helpstat) { alert("Preview/save the document."); } else { temp = document.editor.area.value; preWindow = open("", "preWindow", "status=no,toolbar=n,menubar=y"); preWindow.document.open(); preWindow.document.write(temp); preWindow.document.close(); } } function bold() { if (helpstat) { alert("Bold text."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<b></b>"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<b>" + twrite + "</b>"; } } } function italic() { if (helpstat) { alert("Italicizes text."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<i></i>"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<i>" + twrite + "</i>"; } } } function underline() { if (helpstat) { alert("Underlines text."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<u></u>"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<u>" + twrite + "</u>"; } } } function pre() { if (helpstat) { alert("Sets text as preformatted."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<pre></pre>"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<pre>" + twrite + "</pre>"; } } } function center() { if (helpstat) { alert("Centers text."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<center></center>"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<center>" + twrite + "</center>"; } } } function hbar() { if (helpstat) { alert("Creates a horizontal bar."); } else { document.editor.area.value = document.editor.area.value + "<hr>\\n"; } } function lbreak() { if (helpstat) { alert("Makes a new line, the equivalent of return or enter."); } else { document.editor.area.value = document.editor.area.value + "<br />\\n"; } } function pbreak() { if (helpstat) { alert("Makes two new lines, the equivalent of two returns or enters."); } else { document.editor.area.value = document.editor.area.value + "<p>\\n"; } } function image() { if (helpstat) { alert("Inserts an image."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<img src=""></img>\\n'; } else if (stprompt) { twrite = prompt("Image location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<img src=' + twrite + '>\\n'; } } } function aleft() { if (helpstat) { alert("Inserts an image with align left."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<img src="" align=left></img>\\n'; } else if (stprompt) { twrite = prompt("Image location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=left>\\n'; } } } function aright() { if (helpstat) { alert("Inserts an image with align right."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<img src="" align=right></img>\\n'; } else if (stprompt) { twrite = prompt("Image location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=right></img>\\n'; } } } function atop() { if (helpstat) { alert("Inserts an image with align top."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<img src=""align=top></img>\\n'; } else if (stprompt) { twrite = prompt("Image location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=top></img>\\n'; } } } function amid() { if (helpstat) { alert("Inserts an image with align middle."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<img src="" align=middle></img>\\n'; } else if (stprompt) { twrite = prompt("Image location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=middle></img>\\n'; } } } function abottom() { if (helpstat) { alert("Inserts an image with align bottom."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<img src="" align=bottom></img>\\n'; } else if (stprompt) { twrite = prompt("Image location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=bottom></img>\\n'; } } } function head1() { if (helpstat) { alert("Creates a header, size 1 (largest size)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<h1></h1>\\n"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<h1>" + twrite + "</h1>\\n"; } } } function head2() { if (helpstat) { alert("Creates a header, size 2 (slightly smaller than 1)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<h2></h2>\\n"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<h2>" + twrite + "</h2>\\n"; } } } function head3() { if (helpstat) { alert("Creates a header, size 3 (slightly smaller than 2)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<h3></h3>\\n"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<h3>" + twrite + "</h3>\\n"; } } } function head4() { if (helpstat) { alert("Creates a header, size 4 (slightly smaller than 3)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<h4></h4>\\n"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<h4>" + twrite + "</h4>\\n"; } } } function head5() { if (helpstat) { alert("Creates a header, size 5 (slightly smaller than 4)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<h5></h5>\\n"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<h5>" + twrite + "</h5>\\n"; } } } function head6() { if (helpstat) { alert("Creates a header, size 6 (smallest size)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<h6></h6>\\n"; } else if (stprompt) { twrite = prompt("Text?", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + "<h6>" + twrite + "</h6>\\n"; } } } function linkopen() { if (helpstat) { alert("Begins a link."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<a href=""></a>'; } else if (stprompt) { twrite = prompt("File location?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<a href=' + twrite + '>'; for (;;) { twrite = prompt("Text?", ''); if (twrite != "" && twrite != null) { break; } else { prompt("You must enter the link text.", 'Ok, sorry.'); } } document.editor.area.value = document.editor.area.value + twrite + '</a>\\n'; } } } function linktext() { if (helpstat) { alert("Inserts the text for a link."); } else if (basic) { for (;;) { twrite = prompt("Text?", ''); if (twrite != "" && twrite != null) { break; } else { prompt("You must enter the link text.", 'Ok, sorry.'); } } document.editor.area.value = document.editor.area.value + twrite + '\\n'; } else if (stprompt) { alert("Not used in prompt mode."); } } function linkclose() { if (helpstat) { alert("Closes a link."); } else if (basic) { document.editor.area.value = document.editor.area.value + "</a>\\n"; } else if (stprompt) { alert("Not used in prompt mode."); } } function anchor() { if (helpstat) { alert("Sets an anchor (eg #here)."); } else if (basic) { document.editor.area.value = document.editor.area.value + '<a name=""></a>\\n'; } else if (stprompt) { twrite = prompt("Anchor name?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + '<a name=' + twrite + '>\\n'; } } } function orderopen() { if (helpstat) { alert("Starts an ordered list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<ol></ol>\\n"; } else if (stprompt) { for (i = 1;; i++) { twrite = prompt("Item " + i + "? (Blank entry stops.)", ''); if (twrite == "" || twrite == null) { break; } if (i == 1) { document.editor.area.value = document.editor.area.value + "<ol>\\n"; okeydokey = 1; } document.editor.area.value = document.editor.area.value + "<li>" + twrite + "\\n"; } if (okeydokey) { document.editor.area.value = document.editor.area.value + "</ol>\\n"; } } } function li() { if (helpstat) { alert("Creates an item in a list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<li>"; } else if (stprompt) { alert("Not used in prompt mode."); } } function orderclose() { if (helpstat) { alert("Closes an ordered list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "</ol>\\n"; } else if (stprompt) { alert("Not used in prompt mode."); } } function unorderopen() { if (helpstat) { alert("Starts an unordered list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<ul></ul>"; } else if (stprompt) { for (i = 1;; i++) { twrite = prompt("Item " + i + "? (Blank entry stops.)", ''); if (twrite == "" || twrite == null) { break; } if (i == 1) { document.editor.area.value = document.editor.area.value + "<ul>\\n"; okeydokey = 1; } document.editor.area.value = document.editor.area.value + "<li>" + twrite + "\\n"; } if (okeydokey) { document.editor.area.value = document.editor.area.value + "</ul>\\n"; } } } function unorderclose() { if (helpstat) { alert("Closes an unordered list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "</ul>\\n"; } else if (stprompt) { alert("Not used in prompt mode."); } } function defopen() { if (helpstat) { alert("Starts a definition list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<dl>"; } else if (stprompt) { for (i = 1;; i++) { twrite = prompt("Term " + i + "? (Blank entry stops.)", ''); if (twrite == "" || twrite == null) { break; } if (i == 1) { document.editor.area.value = document.editor.area.value + "<dl>\\n"; okeydokey = 1; } document.editor.area.value = document.editor.area.value + "<dt>" + twrite + "</dt>\\n"; twrite = prompt("Definition" + i + "? (Blank entry stops.)", ''); if (twrite == "" || twrite == null) { break; } document.editor.area.value = document.editor.area.value + "<dd>" + twrite + "<dd>\\n"; } if (okeydokey) { document.editor.area.value = document.editor.area.value + "</dl>\\n"; } } } function defterm() { if (helpstat) { alert("Creates the term in a definition."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<dt>"; } else if (stprompt) { alert("Not used in prompt mode."); } } function define() { if (helpstat) { alert("Creates the definition."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<dd>"; } else if (stprompt) { alert("Not used in prompt mode."); } } function defclose() { if (helpstat) { alert("Closes a defeinition list."); } else if (basic) { document.editor.area.value = document.editor.area.value + "</dt>"; } else if (stprompt) { alert("Not used in prompt mode."); } } function font() { if (helpstat) { alert("Sets the font."); } else if (basic) { document.editor.area.value = document.editor.area.value + ''; } else if (stprompt) { twrite = prompt("Font?", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + ''; } } } function fontcolor() { if (helpstat) { alert("Sets the font color."); } else if (basic) { document.editor.area.value = document.editor.area.value + ''; } else if (stprompt) { twrite = prompt("Color? (hex or name)", ''); if (twrite != null && twrite != "") { twrite = '"' + twrite + '"'; document.editor.area.value = document.editor.area.value + ''; } } } function fontsize() { if (helpstat) { alert("Sets the font size (a number 1-7, or +2, -3, etc.)."); } else if (basic) { document.editor.area.value = document.editor.area.value + "font size=>"; } else if (stprompt) { twrite = prompt("Size? (eg 1, +5, -2, etc.)", ''); if (twrite != null && twrite != "") { document.editor.area.value = document.editor.area.value + ""; } } } function fontclose() { if (helpstat) { alert("Closes the font changes."); } else if (basic) { document.editor.area.value = document.editor.area.value + ""; } else if (stprompt) { document.editor.area.value = document.editor.area.value + ""; } } function formtable() { if (helpstat) { alert("Creates a table."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<table></table>"; } else if (stprompt) { alert("Not used in prompt mode."); } } function formtr() { if (helpstat) { alert("Creates a table row."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<tr></tr>"; } else if (stprompt) { alert("Not used in prompt mode."); } } function formtd() { if (helpstat) { alert("Creates a standard table cell."); } else if (basic) { document.editor.area.value = document.editor.area.value + "<td></td>"; } else if (stprompt) { alert("Not used in prompt mode."); } }
.button { padding: 10px 20px; font-size: 15px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #e5e59b; border: none; border-radius: 15px; } .button:hover { background-color: #f5f5d8 } .button:active { background-color: #e5e59b; transform: translateY(1px); }
<form name="editor"> <center> <table border=1> <td align=center> <b>Choose Mode:</b><br> <input type="radio" name="mode" value="help" onClick="thelp(1)">Guide <input type="radio" name="mode" value="prompt" onClick="thelp(2)">Prompt <input type="radio" name="mode" value="basic" checked onClick="thelp(0)">Write </td> </table> <br> <table border=1> <tr> <td align=center> <input type="button" value="Preview" onClick="preview()"> <input type="button" value=" Start " onClick="start()"> <input type="button" value=" End " onClick="end()"> <input type="button" value="<img>" onClick="image()"> <input type="button" value="<L>" onClick="aleft()"> <input type="button" value="<R>" onClick="aright()"> <input type="button" value="<T>" onClick="atop()"> <input type="button" value="<M>" onClick="amid()"> <input type="button" value="<B>" onClick="abottom()"> <input type="button" value="Reset" onClick="treset()"> </td> </tr> <td> <input type="button" value="B" onClick="bold()"> <input type="button" value="I" onClick="italic()"> <input type="button" value="U" onClick="underline()"> <input type="button" value="C" onClick="center()"> <input type="button" value="<p>" onClick="pbreak()"> <input type="button" value="<br>" onClick="lbreak()"> <input type="button" value="<hr>" onClick="hbar()"> <input type="button" value="<pre>" onClick="pre()"> <input type="button" value="h1" onClick="head1()"> <input type="button" value="h2" onClick="head2()"> <input type="button" value="h3" onClick="head3()"> <input type="button" value="h4" onClick="head4()"> <input type="button" value="h5" onClick="head5()"> <input type="button" value="h6" onClick="head6()"> </td> </tr> <tr> <td> <input type="button" value="Link" onClick="linkopen()"> <input type="button" value="⚓" onClick="anchor()"> <input type="button" value="<ol>" onClick="orderopen()"> <input type="button" value="<li>" onClick="li()"> <input type="button" value="<ul>" onClick="unorderopen()"> <input type="button" value="<t>" onClick="formtable()"> <input type="button" value="<tr>" onClick="formtr()"> <input type="button" value="<td>" onClick="formtd()"> <input type="button" value="Font" onClick="font()"> <input type="button" value="Color" onClick="fontcolor()"> <input type="button" value="Size" onClick="fontsize()"> <input type="button" value="Close" onClick="fontclose()"> </td> </tr> </td> </table> <table> <tr> <textarea name="area" rows=50 cols=71 wrap=physical> </textarea> <br> <br> </td> </table> </center> <body> <button class="button" value="<td> onClick=" formtr() " <a href="https://oeclassics.blogspot.com ">Check</a></button> </body> </form>
3 个解决方案
解决方案1
3 2020-02-27 09:48:04
CSS:- .btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
HTML: <div onclick="myFunction()">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<element onclick="myScript">
解决方案2
2 2020-02-27 09:22:18
以这种方式添加您的风格
input[type=button] {
padding: 10px 20px;
font-size: 15px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #e5e59b;
border: none;
border-radius: 15px;
}
input[type=button]:hover {background-color: #f5f5d8}
input[type=button]:active {
background-color: #e5e59b;
transform: translateY(1px);
}
解决方案3
1 2020-02-27 09:25:22
我想你忘了为每个按钮添加类属性，所以只需添加
class="button"
在输入元素中
在 CSS 中，“.” (dot) 指的是类，因此任何具有该类的元素都将使用类自定义样式
如何将单击功能添加到在 javascript 中动态添加的按钮数组？
[英]How to add click function to a array of buttons which is added dynamically in javascript?
如何在JavaScript中使用for循环/单击事件添加多个按钮？
[英]How to add multiple buttons with a for loop/click event in JavaScript?
单击时如何使按钮更改 colors (html, CSS, JavaScript)
[英]How to make buttons change colors when clicked on (html, CSS, JavaScript)
如何在循环结果中添加许多使用相同javascript的html按钮？
[英]How to add many html buttons that use same javascript into loop results?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 JavaScript 的点击事件上添加 css class？
如何将单击功能添加到在 javascript 中动态添加的按钮数组？
如何在JavaScript中使用for循环/单击事件添加多个按钮？
单击时如何使按钮更改 colors (html, CSS, JavaScript)
如何使用CSS在基于JavaScript的按钮中添加换行符
HTML / CSS / JavaScript如何向内容添加超链接？
如何在循环结果中添加许多使用相同javascript的html按钮？
如何使用JavaScript在html中为按钮添加消息框
如何在单击时向按钮添加类
如何在 html/css 中分隔按钮
相关标签