Axel Posted February 2, 2013 Share Posted February 2, 2013 Hi there. I've managed to change the padding of an element using javascript. I changed: #content { border-right: 1px solid #e6e6e6; margin: 0 -31px -9999px -5.1%; padding: 106px 30px 9999px 5.1%; background: #fff url(../images/bg-content.gif) repeat-y; position: relative; z-index: 2; } using: document.getElementById("content").style.padding = "106px 0px 9999px 0%"; How would I go about changing a css attribute that's a class? i.e.: .post p {margin: 0;} Link to comment Share on other sites More sharing options...
0 winlonghorn Posted February 2, 2013 Share Posted February 2, 2013 Hi there. I've managed to change the padding of an element using javascript. I changed: #content { border-right: 1px solid #e6e6e6; margin: 0 -31px -9999px -5.1%; padding: 106px 30px 9999px 5.1%; background: #fff url(../images/bg-content.gif) repeat-y; position: relative; z-index: 2; } using: document.getElementById("content").style.padding = "106px 0px 9999px 0%"; How would I go about changing a css attribute that's a class? i.e.: .post p {margin: 0;} You could get all child elements of ".post" using the jquery children function and set the values using the css function. :) Here is an example: //jquery example$(".post").children().css('padding', '106px 0px 9999px 0%');[/CODE] Link to comment Share on other sites More sharing options...
0 Axel Posted February 2, 2013 Author Share Posted February 2, 2013 Sorry I'm not familiar with how to use jquery but I know jquery.js is included in the head of the document. At the moment I've added this into the body of a post: <script> function myFunction() { document.getElementById("content").style.padding = "106px 0px 9999px 0%"; } </script> <button onclick="myFunction();">click</button> This changes the padding in the matching css #content rule. I want to change .post p {margin: 0;} to .post p {margin-right: -50px;} Link to comment Share on other sites More sharing options...
0 winlonghorn Posted February 2, 2013 Share Posted February 2, 2013 Sorry I'm not familiar with how to use jquery but I know jquery.js is included in the head of the document. At the moment I've added this into the body of a post: <script> function myFunction() { document.getElementById("content").style.padding = "106px 0px 9999px 0%"; } </script> <button onclick="myFunction();">click</button> This changes the padding in the matching css #content rule. I want to change .post p {margin: 0;} to .post p {margin-right: -50px;} I actually made one mistake in my example code. The children function call should look like this: ".children('p')". What you would do is modify your javascript function as shown below: <script> function myFunction() { document.getElementById("content").style.padding = "106px 0px 9999px 0%"; $(".post").children('p').css('margin-right', '-50px'); }</script>[/CODE] So you would basically just add the line of code that I gave you below the existing line of code in your javascript function. Link to comment Share on other sites More sharing options...
0 Axel Posted February 2, 2013 Author Share Posted February 2, 2013 Thanks for your reply. Unfortunately I get this error if I run the code: Uncaught TypeError: Property '$' of object [object Window] is not a function myFunction onclick this is in the head: <script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"></script> Could there be another way to do this? If I add <style>.post p {margin-right: -50px;} </style> to the bottom of the <head> it adds the proper margin to the element. Trouble is it occurs across the whole wordpress site. I only want it to load upon a certain page I tried adding: <script> if (document.title == "Contact Us") { document.write("<style>.post p {margin-right: -50px;} </style>"); } </script> to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js. Link to comment Share on other sites More sharing options...
0 winlonghorn Posted February 2, 2013 Share Posted February 2, 2013 Thanks for your reply. Unfortunately I get this error if I run the code: Uncaught TypeError: Property '$' of object [object Window] is not a function myFunction onclick this is in the head: <script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"></script> Could there be another way to do this? If I add <style>.post p {margin-right: -50px;} </style> to the bottom of the <head> it adds the proper margin to the element. Trouble is it occurs across the whole wordpress site. I only want it to load upon a certain page I tried adding: <script> if (document.title == "Contact Us") { document.write("<style>.post p {margin-right: -50px;} </style>"); } </script> to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js. No problem at all! :) Ok, it may not be properly accessing jquery in that case. Try changing this line: <script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"></script>[/CODE] To this: [CODE]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>[/CODE] Here is a link to describe additional issues that could cause the error message that you are seeing (just in case my solution fails for some reason): http://stackoverflow...-not-a-function Link to comment Share on other sites More sharing options...
0 Axel Posted February 2, 2013 Author Share Posted February 2, 2013 Thanks buddy. I'm packing up for today and my heads spinning focusing on such a simple problem for so long. I've solved it presently using php: <?php $currentpageurl=$_SERVER['REQUEST_URI']; if ($currentpageurl = "/contact-us/") { echo "<style>#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}</style>"; } ?> Wish I'd thought of that first thing! Link to comment Share on other sites More sharing options...
0 winlonghorn Posted February 2, 2013 Share Posted February 2, 2013 Thanks buddy. I'm packing up for today and my heads spinning focusing on such a simple problem for so long. I've solved it presently using php: <?php $currentpageurl=$_SERVER['REQUEST_URI']; if ($currentpageurl = "/contact-us/") { echo "<style>#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}</style>"; } ?> Wish I'd thought of that first thing! You are very welcome! :) I don't blame you at all. Working on problems like this for so long can bring headaches very easily. I know from past experience. lol. Also, just in case you want to use jquery in the future, I found another link that may help. I noticed from your code that you may be using wordpress. If so, the following link should be helpful for future use: http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/ Link to comment Share on other sites More sharing options...
Question
Axel
Hi there.
I've managed to change the padding of an element using javascript. I changed:
#content { border-right: 1px solid #e6e6e6; margin: 0 -31px -9999px -5.1%; padding: 106px 30px 9999px 5.1%; background: #fff url(../images/bg-content.gif) repeat-y; position: relative; z-index: 2; }using:
document.getElementById("content").style.padding = "106px 0px 9999px 0%";How would I go about changing a css attribute that's a class?
i.e.:
.post p {margin: 0;}Link to comment
Share on other sites
7 answers to this question
Recommended Posts