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.
Related
I'm trying to change the .innerHTML of a span for which the name changes every time I refresh the page (only some part of that name changes)
So for example, I always use this to change the span's innerHTML:
document.getElementsByClassName('something')[0].innerHTML='new text';
but my problem is that the site now adds random characters after that "something", for example:
<span class="something RANDOM123 random212312">some text</span>
and my question is, is this possible to find this span and change the innerHTML of it just by looking for the first part of the class name which is "something"?
Maybe you can use partial selector:
$('[class^="value"]') <-- starts with string
$('[class$="value"]') <-- ends with string
// using jQuery
$('[class^="something"]')[0].innerHTML='new text';
// using document
document.querySelectorAll('[class^="something"]')[1].innerHTML='new other text';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="something RANDOM123 random212312">some text</span>
<span class="something RANDOM123 random212312">some other text</span>
Can you just add an ID to the spans you want to update? Then just search by those IDs? That's likely the correct way to do it. Otherwise, you might have to write your own thing that loops through the collection of spans in the document and check the class to see if it starts with "something" (prehaps indexOf === 0).
function GetSomethingSpans() {
const AllSpans = document.getElementsByTagName('span');
const AllSpanCount = AllSpans.length;
const SomethingSpans = [];
for (var i = 0; i < AllSpanCount; i++) {
if (AllSpans[i].className.indexOf("something") === 0) {
SomethingSpans.push(AllSpans[i]);
}
}
return SomethingSpans;
}
This is entirely untested, and there might be bugs. But hopefully it's a useful starting point. Could probably adjust it to have a parameter that is the class you're looking for, and you don't have to make it be the first class... hopefully this gets you going.
document.querySelectorAll("something") will retrieve all elements that have that class, regardless of what others classes are added to the element.
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.
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.
I am trying to replace a CSS style in the following code:
var theHTML = this.html();
theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"");
alert(theHTML);
The html looks like this:
<IMG SRC="picturesFromServer.asp?PhotoId=365481" style="display:none;">
However once i check to see if it changed it or not it keeps displaying none instead of inline. I'm just trying to make it visible before i print it.
You could use JQuery's .css() method:
$("img").css("display","inline");
EDIT : If what you are trying to accomplish is, get the img tag inside this and append it somewhere else, with display:none; do this.
http://jsfiddle.net/tL3Uf/
HTML
<div id="mainContainer">
<img src="http://imgh.us/business-online.jpg" style="display:none;" /> </div>
<div id="destination"></div>
Javascript
$(function(){
var $img = $("#mainContainer img").clone();
$img.show(0).appendTo('#destination');
});
CSS
#incase image doesnt load
img{
padding: 10px;
background: #f00;
}
I'm really not a jQuery master, but in Javascript are strings immutable? Should you try something like
theHtml = theHtml.replace(...)
replace the first two lines of the given code with this line :
$(this).find("img").css("display","inline");
The string .replace() method doesn't update the string you call it on, it returns a new string - so that's why your alert(theHTML) continues to display the original string. If you said this:
theHTML = theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"")
Then alert(theHTML) would show the replaced version.
However, that still won't have any effect on the actual img element, because it is still just a manipulation of a string variable that has no connection to your element. To actually make the img element visible you'd have to replace it with a new element generated from your string, which is a hassle, or you can just set the display property directly:
$(this).css("display", "inline");
Note also that your original code said this.html() - it seems unlikely that this would be a jQuery object that you can call the jQuery .html() method on, it is more likely to be the DOM element itself in which case you'd need to say $(this).html(). So if any of the answers don't work it might be related to how you are getting the this reference to the img element in the first place - might be helpful if you could update your question to show that.
Note also that if the idea here is for the img element to appear in printed output but not otherwise you can do that with CSS:
#media all {
img.printOnly { display: none; }
}
#media print {
img.printOnly { display: inline; }
}
Give the "printOnly" class (or whatever classname you want to use) to any elements that should appear for print only. Or specify by id. Whatever.
I have a span tag
<span class="vi-is1-prcp" id="v4-25">US $99.00</span>
I would like to grab it using pure javascript. JQuery or any other library is not allowed. Is that possible?
I recon that
getElementById('v4-25')
won't work since I have to specify class, too, correct?
Thank you,
So,
<div id="listprice">asdasdasdasdasd</div>
var string = document.getElementById('v4-25');
document.getElementById('listprice').innerHTML = string;
should print value of 'v4-25' in 'listpirce' ?
H
getElementById will work just fine. Just make sure you're running it after the page has loaded.
First of all, ids are unique. You can't have more than one. therefore, when you select element by id, you can only bring back one element (this is good).
Secondly, after you get an element, you have to do something with it. var string = document.getElementById('v4-25'); only gets you the element, but it looks like you want var string = document.getElementById('v4-25').innerHTML; for the price. If you do want the id instead you can do var string = document.getElementById('v4-25').id; but because that just returns "v4-25" it's a bit redundant.
There is no reason to add a class. Run the script after that dom element is loaded like this.
<span class="vi-is1-prcp" id="v4-25">US $99.00</span>
<script>
var elm = document.getElementById('v4-25');
</script>