11

我正在使用下面的脚本来更改脚本的颜色，但像这样显示'font color="red">Hello world /font>。是否有任何可能的方法来更改警报文本颜色..

<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">

var str = new String("Hello world");

alert(str.fontcolor( "red" ));

</script>
</body>
</html>
4

3 回答 3

11

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

最接近的方法是通过 DOM 修改 HTML 文档以显示消息，而不是使用alert().

于 2012-11-19T10:27:23.517 回答
5

您可以使用 JQuery 来解决您的问题

<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-                  ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
 $( "#dialog-message" ).dialog({
  modal: true,
  buttons: {
  Ok: function() {
   $( this ).dialog( "close" );
   } 
}});
});
</script>
</head>

<body>
 <div id="dialog-message" title="My Dialog Alternative">
 <p style='color:red'> Hello world </p>
 </div>
</body>
 </html>
于 2013-06-20T14:47:52.580 回答
2

希望这有帮助：

<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;}

#alertbox{display: none;
    position: fixed;
    background: #000;
    border:7px dotted #12f200;
    border-radius:10px; 
    font-size:20px;}

#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; } 
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->

<script>
function CustomAlert(){
    this.on = function(alert){
        var winW = window.innerWidth;
        var winH = window.innerHeight;

        alertoverlay.style.display = "block";
        alertoverlay.style.height = window.innerHeight+"px";
        alertbox.style.left = (window.innerWidth/3.5)+"pt";
        alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
    alertbox.style.top = (window.innerHeight/10)+"pt";
        alertbox.style.display = "block";
        document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
        document.getElementById('alertboxbody').innerHTML = alert;
        document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
    }
    this.off = function(){
        document.getElementById('alertbox').style.display = "none";
        document.getElementById('alertoverlay').style.display = "none";
    }
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
  <div>
    <div id="alertboxhead"></div>
    <div id="alertboxbody"></div>
    <div id="alertboxfoot"></div>
  </div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>

这个概念取自：http: //www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial

于 2017-06-23T12:17:44.853 回答