I need to be able to change the innerHTML of a class, based on the innerHTML of that class, however, the text of that class is different from regular text (has it's own css and what not), and it needs to retain such properties, so I can't use text() I have
<span class="special">John</span>
And I need to change all classes with the special attribute, and innerHTML of John, to Jack.
however, for whatever reason
$("[special='John']").html('<span class="special">Jack</span>');
is not working. I'm sure it's just a silly mistake, but thank you in advance.
Like this?
$(".special:contains('John')").html('Jack');
Or, if the text needs to be equal to, rather than contains:
$('.special').filter(function() {return $(this).text() == "John";}).html('Jack');
Related
Is there a CSS selector to select this element by its inline style attribute value?
<div style='display:block'>...</div>
something like
div[cssAttribute=cssValue]
The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector:
div[style*="display:block"]
It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you have a space somewhere in the attribute value, like this:
<div style='display: block'>...</div>
It won't match until you change your selector to accommodate the space. And then it will stop matching values that don't contain the space, unless you include all the permutations, ad nauseam. But if you're working with a document in which the inline style declarations themselves are unlikely to change at all, you should be fine.
Note also that this is not at all selecting elements by their actual specified, computed or used values as reflected in the DOM. That is not possible with CSS selectors.
Including ";" works better for me.
div[style*="display:block;"]
Always look how the attribute is written in HTML (you can check it in the Elements tab in the browser). You have to use the exact same value. In my case: style="left: 100%;". And not style="left:100%" or anything like that.
I am looking for a way to apply new CSS to only part of the element.
For example. The original HTML looks like
<p>123456</p>
I want to make only 456 into bold.
Of course, I can do it by adding another tag into 456 like
<p>123<b>456</b></p>
But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.
To do that, I am thinking of adding new custom attribute to the existing tag like
<p data-wms="e-3">123456</p>
Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)
Now I have all the information about where to change inside the element.
But still, how can I do that with javascript without adding a tag, without changing dom.
Thanks
You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.
An example would be:
<p>123<span class="bold-highlight">456</span></p>
Thanks to everyone's advice, I researched more, especially about nth-letter.
Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.
Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.
I think that I have to re-design my project...
if it's a static page and you want to change a style for specific text in a specific tag like the following case
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter
$( "p:nth-child(3)" ).css("color","#f00");
I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends
The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';
How is it possible to highlight the code inside a pre element? There is already questions about highlighting it, but the answers is all in JQuery. Is it possible to do it without the tags and it's id in JavaScript and not JQuery. I don't want the whole code block to be the same colour I want every tag-open and tag-close to be a colour, the tag value to be another colour and the attributes and it's value to be another colour.
document.getElementById("idofpre").style.color="#99999";
Have you tried this?
document.getElementById("the_id_of_pre_block").style.property="value";
The upper code will get the ID of the element and update the style. Second thing you can use TagName too:
document.getElementsByTagName("pre").style.property="value";
Or else you can use jQuery (the easier way but not your way) to style the content. Using this:
$(document).ready(function() {
$('pre').css('background-color', '#anyhexcode');
});
This will change the background-color of all the text placed inside the pre block. That's what you can do with JavaScript.
One more thing:
You are using onload=hightlight() but you are having a function as colorize() are you sure that's good? I think you need to change that!
Like attribute selectors in CSS, is it possible to apply style on text which is in bold inside a DIV. For example I can select a DIV using CSS attribute selector like below
div[attr = value]{
...
}
Is there any way to select Bold text like above selector? If JavaScript there are several ways to make that work but I am just looking for possibility of CSS solution. And my target is only Chrome
No. CSS doesn't provide any selectors that operate based on the style of an element.
this should be quite easy.
div b{font-weight:normal;}
this will select every <b> tag contained within every <div> tag, and set the font weight to normal.
If you wanted to be specific, use the div class or id.
#someDivId b{font-weight:normal;}
If your bold text is not defined with <b> tags, but you know what tags are used, such as span, then you might try,
span[style*="font-weight"]{font-weight:normal !important;}
http://jsfiddle.net/G8NaB/
Hope this helps...
According to http://www.w3.org/TR/css3-selectors/#attribute-selectors
[att*=val] Represents an element with the att attribute whose value
contains at least one instance of the substring "val". If "val" is the
empty string then the selector does not represent anything.
So you may try:
div[style*=bold]{
...
}
This will work if you apply inline styles.
You can try this fiddle.
HTML
<div data-role="page">Bold text</div>
CSS
div[data-role~="page"]{font-weight:bold;}
Hope this helps.