I am trying to add a function into common.js that will change the background color of a button. Is this possible? thanks guys.
$('#api_search').style.backgroundColor('#e4e4e4');
$('#api_search').css("background","#e4e4e4");
or
$('#api_search').attr("style","background:#e4e4e4");
If you're trying to do this with Javascript, you could do something like the following:
document.getElementById("api_search").addEventListener("click", function(e) {
e.target.style.backgroundColor = "red";
});
Check this out for clarity:
https://jsfiddle.net/9p3f9yjw/2/
You're using a jquery selector which means you'll have different functions/properties available to you than accessing DOM elements in vanilla javascript. Using this approach, you can set multiple css declarations in one function.
If you wanted to change other styling properties, you would just add them to the object passed as the argument to css.
{backgroundColor:'#e4e4e4', color: '#fff', ...}
So you could use .css as follows:
$('#api_search').click(function() {
$(this).css({backgroundColor:'#e4e4e4'})
});
try it here with a button
see jquery css() documentation here
Related
I have a function which is called whenever a checkbox is clicked from a particular group.
I am trying to add a class to the input's parent wrapper when the checkbox is checked, and then remove the class when it isn't checked.
My problem is, I can't seem to get parentNode and classList working together.
eg. This code works:
$(this.parentNode).css( "border", "3px solid red" );
But this code returns an undefined error
alert($(this.parentNode).classList
For context, here's what I'm eventually trying to get to:
if ($(this.parentNode.parentNode).find('.form-type-checkbox').classList.contains("chkbox-checked")) {
$(this.parentNode.parentNode).find('.form-type-checkbox').removeClass("chkbox-checked");
} else {
$(this.parentNode).addClass("chkbox-checked");
}
I think the simplest solution could be like you should use toogleClass() of jQuery. Kindly refer the following code.
$("#id_of_radioButton").click(function(){
$("#id_of_parentNode").toggleClass("classname");
});
$(this.parentNode) is a jQuery object, as classList is pure JS property, this will not work on jQuery referenced object.
Try using jQuery's .attr():
$(this.parentNode).attr('class');
Don't blindly use jQuery for everything. this.parentNode.classList will be defined because it's not wrapped in jQuery, since classList doesn't exist in jQuery.
Can I change the backgroundColor property value using the prop method?
I'm new to programming. :)
This is what I have,
$('ul').prop('backgroundColor','red');
I read the chapters on this book I'm reading and it is my understanding that I can change properties from the DOM using the prop method in jquery. I can change other DOM properties such as className. Why not backgroundColor? Writing this I also tried atr.
$('ul').attr('background-color','red');
In this case, attr does have access to CSS properties, correct? However when using the prop method, we do have access to some CSS properties? Why is backgroundColor created?
I know the best way to go about changing the background color would be to use the css method, in jquery that is. I just wanted to know if or not the prop or atr method can change the background color, and why not, if not. I believe this will give me a better understanding of the DOM.
Thanks!
You need to use .css() to manipulate the CSS properties.
$('ul').css('background-color','red');
The backgroundColor is nested property of style property of the element so .prop('backgroundColor','red'); won't works here.
Instead, you can set property by getting DOM element. In case there is multiple element then you need to iterate over them.
$('div')[0].style.backgroundColor = 'red';
// if there is multiple elements
$('div').each(function() {
this.style.backgroundColor = 'red';
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
Or use css() method to set any style property.
$('div').css('backgroundColor', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
$('ul').attr('background-color','red');
does not work as the attribute is "style" and backgroundColor is a property of that.
You need to use:
$('ul')[0].style.backgroundColor = 'red';
When coding straight html you can specify inline css like this:
<div style="background-color:#00000"></div>
Therefore using jquery, you can leverage this feature by using the attr method.
$('div').attr('style','background-color:#00000;');
So in a way, yes you can alter css using the attr method. Because there is an "attribute" for style (css) in html and changing html attributes is basically what attr is for.
I'd like to remove the following HTML:
Buy It
This HTML is added dynamically (not by me).
How is this done in jquery? Or is it better done in AngularJS?
i would solve this by using css..
.css-button {display: none !important}
since it is added dynamically you would need a trigger function or search repedetly for that special container -> slows down the page
//EDIT with jQuery if necessary
if you really want to do it with jquery, is it always a certain container where the button appears? you could do something like this:
function removeButton() {
$('.css-button').remove();
}
// Listen DOM changes
$('.theContainer').bind("DOMSubtreeModified", removeButton);
see here: http://davidwalsh.name/dom-events-javascript
You can use .remove():
$('.css-button').remove();
In this case you should use :contains to find the button, keep in mind that is a string search:
$( "a:contains('Buy It')" ).remove()
I'm wondering how would I change a CSS element in javascript..e.g if a user clicks a button it changed the background from white to black
Every DOM element has a style property that allows manipulation of CSS properties on that object as if you were mucking with it's style attribute.
The below will toggle the color of the document body but is equally applicable to other HTML elements.
<button onclick="document.body.style.background = (toggle = !toggle) ? 'black' : 'white'">Toggle Background</button>
As TheBuzzSaw points out, you need to camel case them.
So the JS property is backgroundColor instead of background-color.
The rule is basically
var javascriptProperty = cssStyleProperty.replace(
/-([a-z])/g,
function (_, followingLetter) { return followingLetter.toUpperCase(); });
but there are a few exceptions : since float is a keyword in many languages, the CSS style property is cssFloat. The exceptions are explained under JavaScript syntax in the w3schools pages : http://www.w3schools.com/css/pr_class_float.asp
JavaScript syntax: object.style.cssFloat="left"
There are many properties/attributes that can be manipulated directly from JavaScript. You just need to know their names. They are usually strange camel case equivalents of the CSS property names. A quick Google search reveals lots of places to learn about this.
http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html
load new image with black color on click event of the button
If you don't mind using a framework, have a look at jQuery, especially this:
http://api.jquery.com/css/
Framework agnostic script:
http://jsfiddle.net/chprpipr/kWRRN/1/
I want to do this:
e.className = t;
Where t is the name of a style I have defined in a stylesheet.
If e is a reference to a DOM element and you have a class like this: .t {color:green;} then you want reference the class name as a string:
e.className = 't';
Yes, that works (with the class name as a string, as jonah mentioned). Also, you can set style attributes directly on an object, using the DOM Level 2 Style interface. e.g.,
button.style.fontFamily = "Verdana, Arial, sans-serif";
where button is (presumably) a button object. :-)
Not only that works, but it's even a best practice.
You definitively want to separate the data format (xHTML) from the design (CSS) and the behaviour (javascript).
So it's far better to just add and remove classes in JS according to event while the esthetic concerns are delegated to css styles.
E.G : Coloring an error message in red.
CSS
.error
{
color: red;
}
JS
var error=document.getElementById('error');
error.className='error';
N.B :
This snippet is just an example. In real life you would use js just for that.
document.getElementById is not always interoperable. Better to use a JS framework to handle that. I personally use JQuery.
Here is the example that add and remove the class using jQuery.
// js
$("p:first").addClass("t");
$("p:first").removeClass("t");
// css
.t {
backgound: red
}
document.getElementById('id').className = 't'