2012-11-19 80 views
5

我正在使用以下腳本來更改腳本的顏色,但顯示「font color =」red「> Hello world/font> like this.Is any possible way to change alert text color ...使用javascript更改警報消息文本顏色

<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> 
+0

不,這是不可能的,但你可以使用自定義警報框,由div組成 –

+0

嘗試從Jquery UI的模態消息,http://jqueryui.com/dialog/#modal –

回答

4

否。alert()接受一個字符串並使用本機小部件呈現它。沒有規定它的樣式。

6

alert()接受一個字符串並使用本機小部件呈現它。沒有規定它的樣式。

最接近的可能是通過DOM修改HTML文檔以顯示消息而不是使用alert()

4

您可以使用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> 
1

希望這有助於:

<!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

+3

**停止**使用付費URL短eners - 這些被視爲垃圾郵件。 – Glorfindel

+0

**好的,但爲什麼投票結果會降低? – XMMR12

+1

當您投送垃圾郵件標誌時,這些標誌會自動執行(編輯後我已將其撤回)。 – Glorfindel