《9. UI Enhancement》 -----本字幕由雷天音 整理制作----- You should of course already be using CSS to style your web pages, having a
【----QQ 568031962----】 clean division between markup and presentation, just like we want a clean
【----ACELY STUDIO----】 division between markup and behavior.
And the great thing is JavaScript will allow us to make our presentation and our
styles dynamic just like we can make the actual content on our HTML dynamic.
And here's how we do it.
The most direct way is that we can set inline styles on an element directly from JavaScript.
Step one, as ever, is to grab the element using say document.getElementById, and
then we use its .style property to apply a CSS style.
And what we're using here are the same styles we'd use in a CSS document.
So, for example, color equals red.
And any acceptable value in a CSS file can be used here in our JavaScript, so we
could use, say, hexadecimal colors instead,
or myElement.style.left equals 40 pixels or .style.backgroundRepeat equals repeat-x.
Now, one thing to note: you do have all the usual CSS style properties
available, but they might have to be written a little differently, and here's why.
So let's say we take an example of pure CSS in a CSS file.
Well, it's equivalent to set in JavaScript. It looks kind of similar.
We'd say myElement.style.width for width or myElement.style.color for color.
But when it comes to font-weight in CSS, that becomes fontWeight in JavaScript,
with the w capitalized.
Same thing with background-color.
So anything that would be written with a dash or hyphen in CSS becomes
camelCased in JavaScript.
You remove the dash and any subsequent word becomes capitalized.
Now, this is not JavaScript just being different for the sake of it. Think about it.
We can't put a dash in our code.
That's how we subtract in JavaScript.
And because there doesn't need to be white space between our operators,
JavaScript here would think we're trying to perform a subtraction.
myElement.style.background-color or font-weight just wouldn't work, so we do camelCase.
Now, when you're setting these properties, you always set them as a string.
And if they need units when written in CSS, you pass units in JavaScript, so
notice that we have the width is equal to px for pixels.
We need the leading hash, or leading pound sign if you'd prefer, for
the hexadecimal colors.
And one thing to take care of, if you're used to writing a lot of CSS and it's
second nature to right say 230 px;,
you don't want to put that semicolon inside the double quotes that you're
setting the property to.
Yeah, sure, we use the semicolon in JavaScript, but it's outside the quotes,
to end the statement.
Now, if you have predefined classes in your CSS file and you'd like to just use
JavaScript to apply an entire class to an element, we can do that too.
So we had myElement.style and we can think we might have myElement.class,
but here's the problem.
It's not just the word class. You see, class is a special name in most
programming languages.
It has to do with object orientation.
And even though we don't use the word class in JavaScript,
it is a reserved word, and you're not allowed to use it.
So the property we actually set is className.
Grab the element and set its .className property to whatever the name of your
class is in your CSS file.
-----本字幕由雷天音 整理制作----- -----更多Lynda字幕请访问我的人人----- -----联系邮箱：acely@126.com----- If you need to clear it, you can actually clear just by setting it equal to an empty string.
So let's see a couple of examples.