Css content with jquery

jQuery — Get Content and Attributes

jQuery contains powerful methods for changing and manipulating HTML elements and attributes.

jQuery DOM Manipulation

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.

DOM = Document Object Model

The DOM defines a standard for accessing HTML and XML documents:

«The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.»

Get Content — text(), html(), and val()

Three simple, but useful, jQuery methods for DOM manipulation are:

• text() — Sets or returns the text content of selected elements
• html() — Sets or returns the content of selected elements (including HTML markup)
• val() — Sets or returns the value of form fields

The following example demonstrates how to get content with the jQuery text() and html() methods:

Example

The following example demonstrates how to get the value of an input field with the jQuery val() method:

Example

Get Attributes — attr()

The jQuery attr() method is used to get attribute values.

The following example demonstrates how to get the value of the href attribute in a link:

Example

The next chapter explains how to set (change) content and attribute values.

jQuery Exercises

jQuery HTML Reference

For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.

Источник

Получение и установка CSS-свойств элементам в jQuery

В jQuery работа со стилями HTML элементов осуществляется через метод css . Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.

Как получить стиль элемента в jQuery

Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

// Вариант 1 (получение окончательного одного CSS свойства) .css( propertyName ) // propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить .css( propertyNames ) // propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.

Пример, в котором получим цвет фона непосредственно применённого к элементу #header :

var bgHeader = $('#header').css('background-color');

В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.

// можно и так var bgHeader = $('#header').css('backgroundColor');

Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:

// переберём все элементы .container $('.container').each(function(index){ // значение css-свойства display текущего элемента набора var display = $(this).css('display'); // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display) console.log(index + '. display = '+ display); });

Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.

Например, при нажатии на HTML элемент div выведим его ширину и высоту:

 .  

Как изменить или добавить стиль к элементу в jQuery

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

// 1 вариант (для установки одного стиля элементу) .css( propertyName, value ) // 2 вариант (установка значения стиля с помощью функции) css( propertyName, function ) // 3 вариант (для установки несколько стилей элементу) css( properties ) // Описание параметров: // propertyName (тип: String) – имя CSS-свойства // value (тип: String или Number) – значение, которое нужно установить CSS-свойству // function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству // Синтаксис функции: // Function( Integer index, String value ) => String или Number // В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value) // properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

При установлении стилей с помощью метода css , они задаются ко всем элементам текущего набора.

Например, добавим ко всем элементам .info серый цвет фона (background):

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение. })

Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success :

$('.success').css({ 'color':'green', 'font-size':'16px' });

В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -= . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

Например, увеличим отступ слева и справа у элементов .container на 10px :

$('.container').css({ "padding-left": "+=10", "padding-right":"+=10" });

Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

.css('имяСвойства',функция) // функция: Function( Integer index, String value ) => String или Number

Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

Например, установим всем элементам .text , у которых цвет шрифта не равен чёрному, CSS свойство color , равное red .

$('.text').css('color',function(index,value){ if (value!=='rgb(0, 0, 0)') { return 'red'; } });

Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content :

Как удалить определённый стиль у элемента

Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.

Например, уберём у всех изображений на странице CSS свойство height :

Источник

jQuery — css() Method

The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property

To return the value of a specified CSS property, use the following syntax:

The following example will return the background-color value of the FIRST matched element:

Example

Set a CSS Property

To set a specified CSS property, use the following syntax:

The following example will set the background-color value for ALL matched elements:

Example

Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:

The following example will set a background-color and a font-size for ALL matched elements:

Example

jQuery Exercises

jQuery CSS Reference

For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Add Style to HTML Element Using jQuery

To add a style to a HTML element using jQuery, the simplest way is to use the css() method.

$("#div").css("background-color","green");

Let’s say I have the following HTML:

If we want to set a css property and add style to the div, we can use the jQuery css() method to do this with the following Javascript code.

$("#div").css("background-color","green");

The resulting HTML would be as follows:

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div").css("background-color","green");

Add Style to HTML Element Using jQuery With a Click

Many times when creating a web page and the user experience, we want to add different styling and formatting based on an interaction with another element on the web page.

We can change the css by setting a css property and add style to a HTML element using jQuery very easily by combining the addClass() method with a click event.

Let’s say we have the following HTML code and we want to give the user the ability to add a style to the paragraph. The new style will underline the paragraph content.

We can utilize both the jQuery click() method

and jQuery css() method to set a css property and add a style to the paragraph and make the contents underlined.

Below is the Javascript code which will allow the user to be able to set the css property for the paragraph:

The final code and output for this example of how to add style using jQuery and Javascript is below:

Click Me to Add a Style to the Paragraph Below

This is the paragraph we will add styling to.

Using jQuery to Set Multiple CSS Properties to HTML Element

We can use the jQuery css() method to add multiple css properties to an HTML element very easily.

The key to adding multiple css properties to our HTML elements is to make a list of key and value pairs separated by commas in the css() method call.

For example, if we want to add thecss properties “font-size” and “display” to a specific div, we can do so with the following Javascript code:

Let’s say we have the following HTML:

If we want to add css properties to make the font-size bigger and change the background color of the div after a click, we just need to do the following in our Javascript code:

The final code and output for this example of how to add multiple css properties using jQuery and Javascript is below:

Click Me to Add Inline CSS to the Div

Hopefully this article has been useful for you to understand how to use jQuery add style and multiple css properties to a HTML element using jQuery.

Other Articles You’ll Also Like:

• 1. Toggle the Visibility of an Element Using jQuery
• 2. Using jQuery to Convert a String to Lowercase
• 3. Using jQuery to Add Required Attribute to Input Field
• 4. Using jQuery to Increment Value on Click
• 5. Using jQuery to Get the Current URL
• 6. Using jQuery to Disable Input
• 7. jQuery hover – An Interactive Example of the hover Method
• 8. How to Use jQuery to Animate the Font Size of a Paragraph
• 9. Using jQuery to Get Value of Select On Change
• 10. jQuery keyup Method

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Источник