Thursday, November 1, 2012

How to change color/style of element in Jquery/Javascript


jQuery Learnings.

any styling you can do with CSS you can handle with jQuery.



Place the following in your jQuery mouseover event handler:
$(this).css('color', 'red');To set both color and size at the same time:
$(this).css({ 'color': 'red', 'font-size': '150%' });You can set any CSS attribute using the .css() jQuery function.



Whatever DOM element you turn into a jQuery object using this constructor $(),
you can use the .css() method on it.



2

$(document).ready(function() {
    var button = $('#specific_consultant_no');
    button.click(function() {
        button.css('color', 'FOO');
    });
});

THIS
$(this) = in the function object, 'this' refers to: the DOM element, which you need to turn into a jquery object by using $() on this.
[then only you get all the jquery object goodness as .methods on that element.]


if you want to reuse the method, you can do eg.
var colorMethod = function() {
    $(this).css('color', 'FOO');
};
$(document).ready(function() {
    var button = $('#specific_consultant_no');
    button.click(colorMethod);
});
you can also use the addClass and removeClass methods, to be more flexible!



This lets you name your functions to be reused elsewhere.

var colorMethod = function() {

Define using var and give it a name, actually is closest to Python
function_obj = lambda a, b : a+b

or def asdf(a, b): return a+b
function_obj = asdf
[In this second case, you could just pass asdf as arg to a function.]



Entire Jquery object?

You could use the css function:
$(function() {
    $('#specific_consultant_no').click(function() {
        $(this).css('color', 'red');
    });
);




How to change color/style of element in Jquery/Javascript
(just, glorified console-text formatting again.)

changing text color with jquery - Google Search


If no jquery:
http://www.ehow.com/how_5220878_change-text-color-javascript.html
document.getElementById('mySpan').style.color = '#FFFFFF';

function spanColorChange(){document.getElementById('mySpan').style.color = '#FFFFFF';}





No comments:

Post a Comment