set inline-block css with jquery or javascript

Question

based on this example from @Bergi jsfiddle.net/CH9K8/1321/
the code below work fine:

#center{
display:inline-block;
}

but if I try this don't work in Chrome and Safari

$('#center').css('display','inline-block');

nor

document.getElementById('center').style.display='inline-block';

any solution? thanks.

EDIT ... ok now I understand why you say it work fine. I have tried it in Chrome (v30) and safari v5.1 And not work ... but yes it work In Explorer, Firefox, and Opera. So now the question is ... some solution for Chrome and Safari ?

possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Bergi, Nov 04 '13 at 00:40
Oh, and regarding your fiddle: You're loading Mootools there; have you actually included the jQuery library? — Bergi, Nov 04 '13 at 00:42
@bergi. Thanks for asking but NOT. The element is found (I tested with other css properties and works) ... The fiddle example is not mine ... I had tried it with jquery — MTK, Nov 04 '13 at 00:48
Then please show us what exactly you have done (create a demo that exhibits that behaviour), your code should be working. — Bergi, Nov 04 '13 at 00:53
@Bergi So. Try to paste display:inline-block; in the css #center of this example http://jsfiddle.net/CH9K8/1320/ and you will see how the 3 divs become in one line. — MTK, Nov 04 '13 at 01:21
As soon as I change the jQuery version to one that runs in my browser, it works flawlessly: http://jsfiddle.net/CH9K8/1321/ — Bergi, Nov 04 '13 at 02:38
@Bergi I am used to `js`, but too lazy to learn `css`, so I prefer a js solution. — Timo, Apr 05 '21 at 19:36
@Timo You have to learn css regardless when you want to do styling, no matter whether you set the styles from js or not. — Bergi, Apr 05 '21 at 20:01

score 2 · Accepted Answer · answered Nov 04 '13 at 00:50

2

$('#center').css('display', 'inline-block'); works if you're using jQuery. See: http://jsfiddle.net/CH9K8/1320/ . Change it to block and back.

answered Nov 04 '13 at 00:50

StackSlave

10,198
2
15
30

score 2 · Answer 2 · answered Nov 04 '13 at 02:02

$('#center').css('display','inline-block');

This works fine as previously stated by PHPglue, (when you actually set the fiddle to use jquery instead of Mootools) the issue with the right div not displaying inline is due to your use of both a float and the display-inline property, they're not really compatible with each other.

score 0 · Answer 3 · answered Apr 05 '21 at 19:34

`Pure JS` code to show the use of `block-inline`:

    withElem = document.querySelector('#withSpace')
    withoutElem = document.querySelector('#withoutSpace')
    btn1 = document.createElement('button')
    btn1.textContent = 'element1'
    btn2 = document.createElement('button')
    btn2.textContent = 'element2'
    btn3 = document.createElement('button')
    btn3.textContent = 'element1'
    btn4 = document.createElement('button')
    btn4.textContent = 'element2'

    spn = document.createElement('span')
    spn.style.display = 'inline-block'
    // Get a spacer of 20px:
    spn.style.width = '20px'
    //Append it to another node
    withElem.append(btn1, spn, btn2)
    withoutElem.append(btn3, btn4)

<div id=withSpace></div><br>
<div id=withoutSpace></div>

: spn.style.width = '20px' //Append it to another node parentElem.appendChild(spn)

set inline-block css with jquery or javascript

3 Answers3

Pure JS code to show the use of block-inline:

`Pure JS` code to show the use of `block-inline`: