Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

change alert message text color using javascript

Tags:

javascript

Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..

<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>
like image 606
user1804985 Avatar asked Nov 19 '12 10:11

user1804985


People also ask

Can you customize alert JavaScript?

You can create a custom function that'll replace the native alert() box in the user's web browser. You'll do this from the window object, and the custom function will work as such: Set constants for the alert title and alert button text.

How do I change the color of my alert box?

The programmers can create the default alert box using the alert() method, but they can't change the default style of the alert() box. To change the style of the alert box, programmers need to create the custom alert box and style it according to requirements.

Can you change color in JavaScript?

You can easily change the background color of a webpage i.e. the <body> element or any other element dynamically by using its style property in JavaScript.


2 Answers

No. alert() accepts a string and renders it using a native widget. There is no provision to style it.

The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().

like image 173
Quentin Avatar answered Sep 28 '22 00:09

Quentin


You can use JQuery to resolve your Problem

<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>
like image 21
BlueDesire Avatar answered Sep 28 '22 01:09

BlueDesire