css - 理解 dijit css 和样式的逻辑

Question

我正在尝试使用 dijit.InlineEditBox。 我已将以下代码放入我的 HTML 中，使用 dojo 文档中的示例:

<script type="text/javascript">
    dojo.require("dijit.InlineEditBox");
    dojo.require("dojo.parser");
    dojo.require("dijit.form.TextBox");

    function editableHeaderOnChange(id, arg){
        alert("details changed with id " + id + " and arguments "+arg);
    }
</script>

...
<span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])"
autoSave="true" title="My Text">click to edit me</span>

我正在使用苔原主题。 它有效，但看起来不太好。小部件有自己的样式，不适合我的 CSS。 我用firebug来定位问题的根源。该小部件创建了许多嵌套的 div/span 元素，每个元素都有自己的样式(firebug 中的元素样式):

<span
id="dijit__InlineEditor_0"
class="dijitReset dijitInline"
style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...>

<input type="text" autocomplete="off" 
class="dijit dijitReset dijitLeft dijitTextBox"
id="dijit_form_TextBox_0"
style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;">
...>
</span></span>

(只显示相关部分...)

为了获得我想要的视觉效果，它不会换行， 我需要将 dijit_form_TextBox_0** 的宽度更改为 50%，并将 dijit__InlineEditor_0 的定位更改为 显示:内联**；

或者更改所有内容的位置(我的大部分布局都是 float 的，所以 position: absolute 不适合)

当然，我无法在我的 css 中处理那些 span 元素来更改属性，因为 element.style 具有优先权。

我不明白这个系统的逻辑... 为什么 dijit 直接在元素内部生成样式？ 如何更改这些属性？

谢谢 汤姆

Answer 1

这将为您提供创建自己的主题所需的一切，就像 Tundra 一样。

http://docs.dojocampus.org/dijit-themes

添加:

Dijit 将尝试使用您的内联样式(如宽度和高度)来确定其内部元素的正确设置。所以你可以这样写

 <span style="width:200px" id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span> 

看看它是否有效。不确定字体和行高之类的东西，听起来应该符合主题。也许出于某种原因，它会将这些复制到内联样式中。只需尝试更改它，看看会发生什么。

我也不是事物逻辑方面的专家。我已经尝试了几次并取得了一些成功。我只能告诉你，这并非不可能。很抱歉提供了糟糕的帮助。