使用两个参数将 div 标签传递给 Javascript 函数答案

【问题标题】：Pass div tag into Javascript function with two arguments使用两个参数将 div 标签传递给 Javascript 函数
【发布时间】：2020-04-17 21:43:39
【问题描述】：

我正在尝试将html div tag 传递到下面的Javascript function：

<script type="text/javascript">
        function fire(message, type) {
            {
                var cssclass;
                switch (type) {
                    case 'Error':
                        cssclass = 'alert-danger'
                        break;
                    case 'Warning':
                        cssclass = 'alert-warning'
                        break;
                    default:
                        cssclass = 'alert-info'
                }
            }

            var elem2 = document.createElement('div');
            //elem2.innerHTML = '<div class="alert alert-warning alert-dismissible fade show"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><span><strong>unbelievable</strong></span></div>'; works.
            elem2.innerHTML = '<div class="alert '+type+' alert-dismissible fade show"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><span><strong>'+message+'</strong ></span ></div > ';
            document.body.appendChild(elem2);
        }

    </script>

还在file.aspx，

我已经定义了

<asp:Label ID="lblJavaScript" runat="server" Text=""></asp:Label>

然后调用file.cs，进行测试：

 lblJavaScript.Text = "<script type='text/javascript'>fire('test', 'Error');</script>";

最让我印象深刻的是缺少彩色框来框住变量test，正如hard-coded 语法中突出显示的那样：

elem2.innerHTML = '<div class="alert alert-warning alert-dismissible fade show"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><span><strong>unbelievable</strong></span></div>';

。因此，我很想知道其中的原理。提前感谢相关解释。

【问题讨论】：

你想用lblJavaScript.Text = "<script type='text/javascript'>fire('test', 'Error');</script>";测试什么？
通过div class调用的Bootstrap box的外观

标签： javascript c# html asp.net

【解决方案1】：

作为一种解决方法，我定义了以下script，希望它能帮助遇到类似问题的其他人：

<script type="text/javascript">
        function fire(message, type) {
            {
                var cssclass;
                var csscolor;
                switch (type) {
                    case 'Success':
                        cssclass = 'alert-success'
                        csscolor = '#28a745'
                        break;
                    case 'Error':
                        cssclass = 'alert-danger'
                        csscolor = '#dc3545'
                        break;
                    case 'Warning':
                        cssclass = 'alert-warning'
                        //csscolor = '#f0ad4e'
                        csscolor = '#ffc107'
                        break;
                    default:
                        cssclass = 'alert-info'
                        csscolor = '#17a2b8'
                }
            }

var elem2 = document.createElement('div');

elem2.innerHTML = '<div class="alert ' + type + ' alert-dismissible fade show" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;background-color:' + csscolor+'"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><span><strong>'+message+'</strong ></span ></div > ';
            document.body.appendChild(elem2);
}

</script>

【讨论】：