如何在没有内联样式的情况下使用 Javascript 在表单上添加颜色亮点？答案

【问题标题】：How to put color highligts on forms with Javascript without inline styling?如何在没有内联样式的情况下使用 Javascript 在表单上添加颜色亮点？
【发布时间】：2019-02-28 12:02:08
【问题描述】：

我制作了一个 HTML 表单，其中包含带有 javascript 的警报消息。我需要在不使用内联 CSS 的情况下，使用 Javascript 将此警报消息更改为红色/绿色突出显示框。

这就是现在的样子：

function validateFormC() {
let x = document.forms["contactForm"]["name_contact"].value;
if (x === "") {
    alert("Don't forget to fill in your name!");
    return false;
}
x = document.forms["contactForm"]["email_contact"].value;
if (x === "") {
    alert("Don't forget to fill in your e-mail!");
    return false;
}
}

所以我需要的是获得一个红色/绿色框而不是警报消息。并且转换文本框旁边的警报消息会很好。有什么想法吗？

【问题讨论】：

请展示您的尝试 - 哪些有效，哪些无效？

标签： javascript html css forms inline

【解决方案1】：

没有。 alert() 接受一个字符串并使用本机小部件呈现它。没有规定样式。

【讨论】：

您理解错误的问题 - OP 正在询问如何设置作为警报替换的文本框的样式。
你有什么想法吗？

【解决方案2】：

您无法更改警报消息的颜色，但您可以使用与警报相同的不同插件，并提供精美的警报设计。而且非常易于使用。请检查此。sweet alert

【讨论】：

【解决方案3】：

您可以创建（覆盖）alert()，然后您可以更新模板样式。

但这不是正确的方法！

alert('Your alert message.');

<script>
window.alert = function(text = '') {
    const d = document;
    const alertId = 'custom-alert';
    const hostname = window.location.hostname;

    const style = `<style id="${alertId}-style">
                #${alertId} {
                    --padding:16px;

                    position:fixed;
                    top:0;
                    left:50%;
                    transform:translateX(-50%);
                    width:450px;
                    min-height:132px;
                    padding:var(--padding);
                    font-family:Arial,sans-serif;
                    box-shadow:0 0 20px 1px rgba(0,0,0,0.4);
                    border-radius:5px;
                    font-size:12px;
                    color:#000
                }

                #${alertId} span {
                    display:block
                }

                #${alertId} span:first-of-type {
                    font-size:var(--padding);
                    padding-bottom:var(--padding)
                }

                #${alertId} span:first-of-type::after {
                    content:attr(data-host)
                }

                #${alertId} span:last-of-type {
                    color:#666
                }

                #${alertId} div {
                    position:absolute;
                    bottom:var(--padding);
                    right:var(--padding);
                    min-width:60px;
                    background:#3F86F4;
                    color:#fff;
                    text-align:center;
                    padding:10px
                }
                #${alertId} div::before {
                    content:attr(data-ok)
                }

                #${alertId} div:active {
                    background:#6ba0f4
                }
            </style>`;

    const template = `<div id="${alertId}">
                        <span data-host="${hostname.length ? hostname : 'localhost'} says"></span>
                        <span>${text}</span>
                        <div data-ok="OK"></div>
                    </div>`;

    d.body.insertAdjacentHTML('beforeend', style + template);

    const alertModal = d.querySelector('#' + alertId);

    alertModal.querySelector('div').addEventListener('click', () => {
        const alertStyle = d.querySelector(`#${alertId}-style`);
        alertStyle.parentNode.removeChild(alertStyle);
        alertModal.parentNode.removeChild(alertModal);
    });
};
</script>

【讨论】：