It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name from the element. Then use that class name as your hook in the CSS to affect the styling. <\/p>\n
However, there are times when you need to apply styling within JavaScript. jQuery has a function just for it:<\/p>\n
$(\"#thing\").css(\"margin-right\", 0);<\/code><\/pre>\n<\/p>\n
It can even be kind of appealing, because jQuery handles some cross-browser weirdness for you. For example, opacity is one of those things that requires a variety of CSS properties<\/a> to be cross-browser compatible. But with jQuery, you don’t need to apply all of them. Just setting the opacity with the CSS function works. jQuery knows what kind of browser environment it is in and will apply the right property.<\/p>\n\/\/ just works\r\n\/\/ also alternate CSS syntax\r\n$(\"#thing\").css({\r\n opacity: 0.5\r\n});<\/code><\/pre>\nSo you might extend that thinking into assuming that jQuery will help you out with other things that require multiple CSS properties to get the same cross browser effect, like the quintessential example of border-radius. We need -moz-border-radius<\/tt> for Mozilla browsers, <\/tt>-webkit-border-radius<\/tt> for WebKit browsers, and border-radius<\/tt> for Opera (and the future). But jQuery doesn’t help us here. <\/p>\n\/\/ not gonna help in current Firefox or Safari\/Chrome\r\n$(\"#thing\").css({\r\n \"border-radius\": \"20px\"\r\n});<\/code><\/pre>\nTo get cross-browser compatible CSS through jQuery, we’ll still have to list all three:<\/p>\n
$(\"#thing\").css({\r\n \"border-radius\": \"20px\",\r\n \"-moz-border-radius\": \"20px\",\r\n \"-webkit-border-radius\": \"20px\"\r\n});<\/code><\/pre>\nSo what’s up with that? David Walsh thinks<\/a> it would be library bloat to have this abstraction within jQuery. Ben Alman thinks<\/a> jQuery should handle fully supported CSS properties (the border-radius spec isn’t officially final). Screwlewse thinks<\/a> that the only reason opacity is supported that way is because it’s required for animation (core functions like fadeToggle). <\/p>\nI’m not sure what I think 100%. On one hand it sure would be nice to have that handled magically for me. On the other I can understand the bloat and not-final-spec arguments.<\/p>\n
What do you think?<\/p>\n
If you have found yourself needing to apply rounded corners through jQuery, you might be smart to abstract it away into a little plugin for yourself.<\/p>\n
$.fn.roundThis = function(radius) {\r\n return this.each(function(e) {\r\n $(this).css({\r\n \"border-radius\": radius,\r\n \"-moz-border-radius\": radius,\r\n \"-webkit-border-radius\": radius\r\n }); \r\n }); \r\n};\r\n\r\n$(function() {\r\n\r\n \/\/ usage\r\n $(\"#thing-that-will-become-rounded\").roundThis(\"20px\");\r\n\r\n});<\/code><\/pre>\nThis still won’t handle IE though, but there are great plugins that do<\/a>.<\/p>\n
\nIn other news:<\/em> Congratulations to Brent Traut for winning the free jQuery Conference<\/a> ticket from my little contest. There were ten people who entered who donated a total of $115 to open source projects. Pseudo-random number generation<\/a> picked the winner. If you were still thinking of coming, you should! And if you were still thinking about donating to open source, you should!<\/p>\n","protected":false},"excerpt":{"rendered":"It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name from the element. Then use that class name as your hook in the CSS to […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[265],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":168883,"url":"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/","url_meta":{"origin":6150,"position":0},"title":"Improving UI Animation Workflow with Velocity.js","date":"April 30, 2014","format":false,"excerpt":"The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well. In this article, Julian introduces Velocity.js itself.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147093,"url":"https:\/\/css-tricks.com\/the-use-of-jquery-in-tutorials\/","url_meta":{"origin":6150,"position":1},"title":"The Use of jQuery in Tutorials","date":"August 20, 2013","format":false,"excerpt":"A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials. Lately I've begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It's hard to find a solid tutorial that doesn't include jQuery instead of JavaScript.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":160266,"url":"https:\/\/css-tricks.com\/myth-busting-css-animations-vs-javascript\/","url_meta":{"origin":6150,"position":2},"title":"Myth Busting: CSS Animations vs. JavaScript","date":"January 13, 2014","format":false,"excerpt":"The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack does a lot of work with animations in the browser and has discovered that the generic opinion that \"CSS is faster\" just isn't true. It's more than that, as well. I'll let him\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179204,"url":"https:\/\/css-tricks.com\/add-page-transitions-css-smoothstate-js\/","url_meta":{"origin":6150,"position":3},"title":"How To Add Page Transitions with CSS and smoothState.js","date":"August 15, 2014","format":false,"excerpt":"CSS animations (and a little JavaScript trickery) can let us add page transitions and move away from the hard-cut of page loads. My jQuery plugin smoothState.js helps polish those transitions and improve UI response times. Page transitions benefit the user experience Imagine, for a second, how disorienting it would be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322469,"url":"https:\/\/css-tricks.com\/how-to-recreate-the-ripple-effect-of-material-design-buttons\/","url_meta":{"origin":6150,"position":4},"title":"How to Recreate the Ripple Effect of Material Design Buttons","date":"October 12, 2020","format":false,"excerpt":"When I first discovered Material Design, I was particularly inspired by its button component. It uses a ripple effect to give users feedback in a simple, elegant way. How does this effect work? Material Design's buttons don't just sport a neat ripple animation, but the animation also changes position depending\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/unsplash-alihartmann-ripples.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317131,"url":"https:\/\/css-tricks.com\/reactive-jquery-for-spaghetti-fied-legacy-codebases-or-when-you-cant-have-nice-things\/","url_meta":{"origin":6150,"position":5},"title":"Reactive jQuery for Spaghetti-fied Legacy Codebases (or When You Can\u2019t Have Nice Things)","date":"July 22, 2020","format":false,"excerpt":"I can hear you crying out now: \u201cWhy on Earth would you want to use jQuery when there are much better tools available? Madness! What sort of maniac are you?\u201d These are reasonable questions, and I\u2019ll answer them with a little bit of context. In my current job, I am\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/spaghetti.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6150"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6150"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6150\/revisions"}],"predecessor-version":[{"id":201704,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6150\/revisions\/201704"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=6150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}