[Javascript] Change CSS Attribute

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;}

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]

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:


&lt;script&gt;
function myFunction() {
document.getElementById("content").style.padding = "106px 0px 9999px 0%";
}
&lt;/script&gt;


&lt;button onclick="myFunction();"&gt;click&lt;/button&gt;

This changes the padding in the matching css #content rule.

I want to change .post p {margin: 0;} to .post p {margin-right: -50px;}

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:
&lt;script&gt;
function myFunction() {
document.getElementById("content").style.padding = "106px 0px 9999px 0%";
}
&lt;/script&gt;


&lt;button onclick="myFunction();"&gt;click&lt;/button&gt;
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.

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:

&lt;script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"&gt;&lt;/script&gt;

Could there be another way to do this?

If I add

&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;

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:

&lt;script&gt;

if (document.title == "Contact Us") {
document.write("&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;");
}
&lt;/script&gt;

to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js.

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:
&lt;script type="text/javascript" src="https://website.com/wp-content/themes/yerba/js/jquery.main.js"&gt;&lt;/script&gt;
Could there be another way to do this?

If I add
&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;
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:
&lt;script&gt;

if (document.title == "Contact Us") {
document.write("&lt;style&gt;.post p {margin-right: -50px;} &lt;/style&gt;");
}
&lt;/script&gt;
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

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:


&lt;?php
$currentpageurl=$_SERVER['REQUEST_URI'];
if ($currentpageurl = "/contact-us/") {
echo "&lt;style&gt;#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}&lt;/style&gt;";
}
?&gt;

Wish I'd thought of that first thing!

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:
&lt;?php
$currentpageurl=$_SERVER['REQUEST_URI'];
if ($currentpageurl = "/contact-us/") {
echo "&lt;style&gt;#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}&lt;/style&gt;";
}
?&gt;
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/

Sign In

[Javascript] Change CSS Attribute

Question

Axel

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

winlonghorn

Link to comment

Share on other sites

Axel

Link to comment

Share on other sites

winlonghorn

Link to comment

Share on other sites

Axel

Link to comment

Share on other sites

winlonghorn

Link to comment

Share on other sites

Axel

Link to comment

Share on other sites

winlonghorn

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend