I am trying to change the text of a span to something else when a particular event occurs. I am doing this as :
document.getElementById("usernameError").innerHTML = "**Message";
I want to display the same in a different colour. Any idea on how to do that?
Much appreciated!
You could always just put the message in a span and put a style attribute on it. This should do it:
document.getElementById("usernameError").innerHTML = "<span style='color: red;'>**Message</span>";
As you can find in the Mozilla Developer Network, you can use HTMLElement.style property to change any style on the element.
So you can do something like this to colour it in red:
document.getElementById("usernameError").style.color = '#d00'
A more future proof and reusable solution would probably be to add a class to either the current element or the span element, depending on your requirements:
document.getElementById("usernameError").className = "color-red";
Or working off Erics solution:
document.getElementById("usernameError").innerHTML = "<span class='color-red'>**Message</span>";
Then in your CSS:
.color-red{
color: #F00;
}
You could obviously also add diff colours and attribute in a much more maintainable way like this.
NOTE: className Returns A String, representing the class, or a space-separated list of classes, of an element.
Related
I have a page with a list of images styled using a CSS class that I can use to find the elements in code (if it is necessary).
I would like to have an input that filters my list, by highlighting (ie. Removing my styling class or adding another style) any images that have an alt text which matches the input value.
I hope this is understandable - if not, I can clarify further. Thank you!
try this
$("img[alt="+yourText+"]").addClass("somePredefinedClass")
I think this might be along the lines of what you're looking for:
Where your input has an id of "myInput",
and your saturated class name = "mySaturateClass",
and your image class name = "myImage":
$("#myInput").change(function () {
var searchTerm = $("#myInput").val();
$(".myImage").addClass("mySaturateClass");
$(".myImage[alt=" + searchTerm + "]").removeClass("mySaturateClass");
});
Depending on how you're using the saturation, you might want to swap the addClass and removeClass methods. Hope this helps!
Need to replace a string and want to edit the css of the new string.
var newData = data.replace(/-/gi, ' <span id=\"newCss;\">//</span>');
Anyone knows how to fix this?
Thanks
You can't have semi-colons in id's according to the DOM rules, that might be your issue. Also, id should only be used for singular items, so unless you are guaranteed to have only one such dash you are replacing on the page, you should use a class.
Try:
var newData = data.replace(/-/gi, ' <span class=\"coloredSlash\">//</span>');
and make sure that in your css or <style> you have
.coloredSlash { color: red; }
Then if you want to make changes to its color later, just update your <style> element.
I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.
This is probably very easy/obvious.
I'm writing a Chrome extention.
My Javascript catches the text nodes from any site and changes part of the text to something else. I would like to mark the changed text by changing its color (adding tags).
return "<font color = \"FF0000\">"+a+"</font>"
And the result:
<font color = "FF0000">SomeText</font>
But all I want of course is that the SomeText will appear in red.
I recommend you use CSS in your chrome extension. so my solution would involve giving the DOM element (for your instance maybe its a paragraph or a span) a class. It's not good conventions to put style attributes in your HTML markup.
<p class="red">SomeText</p>
And in your CSS file
.red {
color: #ff0000 /* I actually love this color */
}
So how does this use JavaScript?
Instead of adding the styles directly into the HTML tag, you can instead add a class to an element.
document.getElementByTagName("p").className = "red";
Or if you want to target a specific ID
document.getElementById("object").className = "red";
And that text will be red. And since you can add the red class to any class attribute for any object in the DOM, your code will look cleaner than throwing styles everywhere.
I hope this helps you out. Let me know if otherwise.
function newText(tag, text, style) {
var element = document.createElement(tag); //this creates an empty node of the type specified
element.appendChild(document.createTextNode(text)); //this creates a new text node and inserts it into our empty node
if (style) element.setAttribute('style', style); //this sets the style in inline CSS (warning, this needs different syntax in IE)
return element; //this returns a DOM object
}
This will return a DOM object, and you will need to append it to another node.
var myText = newText('p', 'This is some text!', 'color: red;');
document.getElementById('myTextBox').appendChild(myText);
You need to add color in your style sheet...
Like <input type="text" style="color:red" value="sometext"/>.
HI,
I'm trying to develop some code in Javascript that adds highlighted text to a class. What I want to achieve with this is the ability of text highlighting with a custom color.
I want it to kind of look like the following:
window.getSelected = "<span class=\"highlighted\">" + window.getSelected + "</span>"
after the above code is executed the selected text's background is surrounded by span tags.
thanks,
fbr
You'll want to look into Range Objects, there is a good summary here:
http://www.quirksmode.org/dom/range_intro.html
Browser compatibility will be an issue, but basically, you can get the current selection in the way you suggest, then convert it into a Range, and use the methods of the Range object to find and split the existing DOM nodes, and insert your own <span> tag containing the selected text.
It's not entirely trivial, and involves getting into serious DOM manipulation, but it's a rewarding subject to get your head around. Enjoy!
If you are talking about styling native selections, use ::selection and ::-moz-selection in CSS.
::selection {
color: ...;
background-color: ...;
}
::-moz-selection {
color: ...;
background-color: ...;
}
Alternatively, if you want to highlight an arbitrary element with a class:
CSS
.highlighted {
color: ...;
background-color: ...;
}
JavaScript
yourElement.className = "highlighted";
excuse my english, do you mean adding a class to a text?
function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);
element.setAttribute("class", newClass); // This is for good browsers
element.setAttribute("className", newClass); //For IE<
}
leave all lines, its harmless if you do that way.
If you are using the jQuery framework you can try with the following code:
var your_color = 'yellow';
$('.your-class').css('background-color', your_color);
If you're not using it I highly suggest you start; it makes things a lot easier, it's very stable and it's used by many popular websites including google and stack overflow itself.