Advanced JS Fundamentals to jQuery & Pure DOM Scripting Creating a css() method
Transcript from the "Creating a css() method" Lesson
>> Justin Meyer: To read styles, first we actually do to have a little bit talk about how styles are applied to a element. So here in my page let's say I had a link or an li list item with an anchor inside of it. And I'm gonna have the CSS of li display: inline-block;.
>> Justin Meyer: I'm gonna get my li as Doberman. And if I do Doberman.style.display, what is that value gonna give me back, do you think?
>> Speaker 2: To display inline block.
>> Justin Meyer: You would think, display would give you back inline block, but it's going to give you back an empty string.
[00:00:45] This style object here on an element, that's where a lot of times where people think that it's going to have, it's going to have all of my element styles that are applied to it, but that's not the case. So if I were to get an li the same way,
>> Justin Meyer: And do console.dir on it.
>> Justin Meyer: You can see all of the style properties are emptied out, and I'll explain why this is. Even though, if I had li, if I had any stylesheet that was styling lis, these things would still be all emptied out.
>> Justin Meyer: The reason is, because there's a different way to get the computed style of a element.
[00:01:39] And there's this kind of complex way of going about it which is called document.defaultView.getComputedStyle, we'll pass it the element, and get the style property that you want to read. This is how you get the actual current CSS value as kind of coordinated from the element style property which might be set, there might be property set here.
[00:02:07] And any styles defined in the style sheets, right? If you read it this way, you get what the actual value is.
>> Justin Meyer: The style, you might be wondering what the heck is this style object for on elements? Then if you can't read it, it's only there so you can write it.
>> Speaker 3: Or if you created inline styles, if you can read inline styles.
>> Justin Meyer: You can read them, but only if that property was set as that value, actually going to be the actual value that that element takes on, cool.
>> Justin Meyer: So I'm gonna write jQuery CSS method, which allows you to write a style on an element and also read the style on an element.
[00:03:12] And this is gonna work just like all of these other things have. To read a style, we're gonna use this, but to write a style we're gonna use that style object, make sense? So I'll do this real quick too.
>> Justin Meyer: So again it's gonna look just like the code before, if arguments.length is greater than 1.
>> Speaker 3: One thing I should point out in the attribute line, it's missing a return.
>> Justin Meyer: Thank you very much.
>> Justin Meyer: I'm gonna copy this. So if we're setting, what are we gonna do to each element that we're setting?
>> Justin Meyer: How do you set a style? How do you change an individual element's style properties?
>> Speaker 4: Element.style.
>> Justin Meyer: Element.style, and then how am I gonna change it, so this is, if I'm calling this like, let's copy this code here.
>> Justin Meyer: If I'm calling the css function with padding, cssPropName is padding in values, 20 pixels, this is the style object, how do I set something on it, how do I set a property on it?
>> Speaker 4: With [cssPropName], and set that to value.
>> Justin Meyer: Exactly right, so this is how you can change an element's styles. Now to read it, I don't even have this memorized, and I've written this exercise out so many times
>> Justin Meyer: What I'm going to do is, it's document.defaultView.getComputedStyle with the element, so I'm gonna do the same kind of thing where I do return this
[00:05:09] And I'm going to pass in the element whose computed styles I want, and I'm going to get the property value that I want to return to the user.
>> Justin Meyer: Makes sense, hopefully. So again, all that you need to take from these last ten minutes where I've been talking, is to read and write attribute properties directly on an element.
[00:05:36] You use these methods or if you're using jQuery, use its attr method. And if you're reading the computed value of CSS, you're gonna use this computedStyle.getPropertyValue, or you're going to set the style property. If you're going direct to the DOM and if you're going to use jQuery you can just read this CSS, you can use the CSS method.
[00:06:00] So I'm going to demo all of this real quick to show you how fun it is.
>> Justin Meyer: Let me refresh,
>> Justin Meyer: I'm going to get the input. And I'm gonna change its color to green, and now it's green even though it's not very big, but it is green if you can tell.
[00:06:28] And then I can set its attribute, let's just set some data attribute to bar. Now if I look at this element in the page, it's got a data-foo attribute of bar. I can use that to read and write.