This question already has answers here:
How can I change the text color with jQuery?
(4 answers)
Closed 8 years ago.
I was just playing with the basics but I can't seem to get $('p').attr({color:red}); work.
I also tried using $('p').attr(color,red); but that didn't work either.Please help,here is the whole code btw:http://www.codecademy.com/pyAce14978/codebits/SKByZJ/edit
$('p').css({
color: 'red'
});
or
$('p').attr({
'style' : 'color:red;'
});
Use css not attr Function instead
That's because color is not an attribute of P. You need to change the CSS of P, not the "color attribute"
$('p').css('color','red');
Try this code:
var e = document.getElementsByTagName("p")[0, 1];
e.style.color = "red";
You better use css $('p').css('color', 'red');
Related
This question already has answers here:
Native javascript equivalent of jQuery :contains() selector
(6 answers)
Closed 3 years ago.
I'm making a chrome extension and i want to do an action when a certain element exist on the page. But the class element isn't precise enough to select the element only by it's class.
the element i'm looking for on pages is the following :
<span class="btn-text">M'y emmener</span>
I tried :
const listfull = document.querySelector('.btn-text:contains("m\'y emmener")');
if (listfull) {
console.log("hello")
}
But it doesn't seems to work anybody could tell me how this works ?
:contains is jQuery-specific syntax. It's also case-sensitive. To achieve what you're looking for, either use jQuery and capitalize the M:
const listfull = $(`.btn-text:contains("M'y emmener")`);
if (listfull.length) {
console.log("hello")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn-text">M'y emmener</span>
Or iterate over all matches of .btn-text and check their textContent:
const listfull = [...document.querySelectorAll(`.btn-text`)]
.find(elm => elm.textContent.includes("M'y emmener"));
if (listfull) {
console.log("hello")
}
<span class="btn-text">M'y emmener</span>
This question already has answers here:
Get "original" (non-hover) background color of object when hovering over it
(6 answers)
Closed 4 years ago.
I'm trying to get the background color of the clicked element, but I get the value for: hover. This is my code:
$(button).click(function() {
var bgColor = $(this).css('background-color');
console.log(bgColor);
});
What am I doing wrong?
You can use event.target
$(button).click(function(e) {
var bgColor = $(e.target).css('background-color');
console.log(bgColor);
});
This question already has answers here:
How can I change an element's text without changing its child elements?
(16 answers)
Closed 1 year ago.
I have next html:
<label for="user_name">
<abbr title="required">*</abbr>
Name
</label>
And I want to change label caption to Title with jquery. So I do
$('label[for=user_name]').html('Title')
And it replaces all inner html (including abbr tag)
So, what's the easiest way to replace only Name?
If you use contents() method it will also return text nodes. Since jQuery doesn't have text node methods, convert last node to a DOM node
$('label[for="user_name"]').contents().last()[0].textContent='Title';
Demo: http://jsfiddle.net/yPAST/1/
Sorry for the late reply... But here is a way to do so using only jQuery:
$('label').contents().last().replaceWith('Title');
It may not be the prettiest way, but this works:
var $label = $('label[for=user_name]');
$label.html($label.html().replace("Name", "Title"));
You can select only the abbr element, store it, and then replace the whole content with the stored element plus the changed caption:
$('label[for="user_name"]').each(function(){
var a = $(this).children('abbr');
$(this).html(a).append('Title');
});
See this fiddle
you can use replace accomplish this
var html = $('label[for=user_name]').html().replace('Name','Testing');
$('label[for=user_name]').html(html);
check it : http://jsfiddle.net/DyzMJ/
Evans solution added to jquery fn to make it's use comfortable:
// get/change node content not children
jQuery.fn.content = function( n ){
var o = $(this).clone();
var c = o.children().remove();
if (typeof n === "string" ){
o.html(n);
$(this).html(c).append(n);
}
return o.html();
}
Usage :$('myselector').content('NewContentString');
This is the solution that worked for the most browsers
$('label[for="user_name"]').contents().last()[0].nodeValue = 'Title';
This one came close but gave issues in ie8 since textContent is not supported
$('label[for="user_name"]').contents().last()[0].textContent='Title';
if you are manipulating more than 1 label you can select each label and replace text with jquery:
$('label[for="user_name"]').contents().last().replaceWith("Title");
and for the second label :
$('label[for="user_lastname"]').contents().last().replaceWith("Title2");
and so on ...
This question already has answers here:
JavaScript DOM remove element
(4 answers)
Remove element by id
(19 answers)
Closed 8 years ago.
I'm using this widget/snippet:
<div class="tbnet-gadget">
<div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
<script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>
This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.
I want to still use this widget, but I'm trying to remove that link from the bottom of it.
I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.
This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/
How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?
Thanks.
http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh
How about just using CSS instead:
#tbnet-link{
display: none !important;
}
JSFiddle
Here is the non-CSS version (which is a bit ridiculous):
You can remove this:
<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
If you add this jQuery and remove the script in your html:
$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
$("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
});
JSFiddle no-CSS
To remove the element:
var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);
To just clear the text:
var el = document.getElementById("tbnet-link");
el.innerHTML = ""
If you're up for jQuery, it's really easy:
$(function(){
$("#tbnet-link").remove();
});
This question already has answers here:
Change content of a div using JavaScript
(4 answers)
Closed 9 years ago.
document.getElementById("txtOutput").value = result;
instead of using .value=result, can I write something else to say, rewrite to a specific div or paragraph?
If you want to write something (including html-formatations) you can use innerHTML orherwise if you need only the text use innerText:
innerHTML
document.getElementById("txtOutput").innerHTML = result
innerText
document.getElementById("txtOutput").innerText = result;
Yes you can. Look at this simple JsFiddle for an example.
HTML:
<div id="me">
<span>old stuff</span>
</div>
Script
document.getElementById('me').innerHTML = "new stuff";
you can use innerHTML:
document.getElementById("txtOutput").innerHTML = 'some content';