2012-11-19 27 views
5

スクリプトの色を変更しても、このような 'font color = "red"> Hello world/font>を表示するには以下のスクリプトを使用しています。アラートのテキストの色を変更する方法はありますか..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

アラート()は文字列を受け入れ、ネイティブウィジェットを使用してレンダリングします。スタイルを設定する規定はありません。あなたはあなたの問題を解決するためにjQueryのを使用することができます

6

alert()は、文字列を受け取り、ネイティブウィジェットを使用してレンダリングします。スタイルを設定する規定はありません。

最も近いのは、alert()を使用する代わりに、DOMを介してHTML文書を変更してメッセージを表示することです。

4

<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

関連する問題