使用 jquery 或 javascript 设置内联块 css答案

【问题标题】：set inline-block css with jquery or javascript使用 jquery 或 javascript 设置内联块 css
【发布时间】：2013-11-04 00:38:09
【问题描述】：

基于@Bergi jsfiddle.net/CH9K8/1321/ 的这个例子
下面的代码工作正常：

#center{
display:inline-block;
}

但如果我尝试这个在 Chrome 和 Safari 中不起作用

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

也没有

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

有什么解决办法吗？谢谢。

编辑... 好的，现在我明白你为什么说它工作正常了。我已经在 Chrome (v30) 和 safari v5.1 中尝试过它并不能正常工作......但是它可以在 Explorer、Firefox 和 Opera 中工作。所以现在的问题是...... Chrome 和 Safari 的一些解决方案？

【问题讨论】：

你为什么不简单地使用 CSS？
Why does jQuery or a DOM method such as `getElementById` not find the element?的可能重复
哦，关于你的小提琴：你正在那里加载 Mootools；你真的包含了 jQuery 库吗？
@bergi。感谢您的询问，但不是。找到了元素（我用其他 css 属性和作品进行了测试）......小提琴的例子不是我的......我用 jquery 试过了
@Timo 不管你什么时候想做样式，不管你是否从js设置样式，你都必须学习css。

标签： javascript jquery css

【解决方案1】：

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

正如 PHPglue 之前所说，这可以正常工作，（当您实际将小提琴设置为使用 jquery 而不是 Mootools 时）右侧 div 不显示内联的问题是由于您同时使用了 float 和 display-inline 属性, 它们之间并不真正兼容。

【讨论】：

【解决方案2】：

$('#center').css('display', 'inline-block'); 在您使用 jQuery 时有效。请参阅：http://jsfiddle.net/CH9K8/1320/。将其更改为 block 并返回。

【讨论】：

【解决方案3】：

`Pure JS`代码展示`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' //将它附加到另一个节点 parentElem.appendChild(spn)

【讨论】：

Pure JS代码展示block-inline的使用：

`Pure JS`代码展示`block-inline`的使用：