jQuery to set css value of one element to another

Question

I need a little help with setting "padding left" of <div id="menu"> to equal the width of <ol>

Here's an example code for reference

<ol style="width:80%">some code</ol>

<div id="menu">some text</div>

I'm trying to do it with jQuery, I don't know it well so this is my attempt

$("#menu").css({"paddingLeft": "$('ol').width()"});

It works only if I enter a value myself like 400px in here $("#menu").css({"paddingLeft": "400px"});

But this is for a responsive design and I want it to automaticaly get the value of <ol> element and in pixes

Answer 1

Remove the " from "$('ol').width()" otherwise it will not work

$("#menu").css({"paddingLeft": $('ol').width()});

If you want to change the padding while changing the size then put it inside window resize() event

$(window).resize(function() {
    $("#menu").css({"paddingLeft": $('ol').width()});
});

Answer 2

很近！

$("#menu").css({"paddingLeft": $('ol').width()});

Answer 3

$("#menu").css({"paddingLeft": $('ol').width()});

Answer 4

From jQuery API

you can check the method .css( propertyName, value ) and figure it out.

By the way, when you refresh your window size. code like this:

$(window).resize(function (){
   $("#menu").css({"paddingLeft": $('ol').width()});
})