理解dijit css和样式的逻辑

Question

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

<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_**的宽度改为50%，并将dijit__InlineEditor_0的位置改为: inline**；

或者更改所有内容的位置(我的大部分布局都是浮动的，因此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> 

看看它能不能用。不确定字体和行高之类的东西，这听起来应该取决于主题。也许它会将这些复制到内联样式中，不管是什么原因。试着改变它，看看会发生什么。

我也不是事物逻辑方面的专家。我已经尝试过几次了，并取得了一些成功。我能告诉你的是这不是不可能的。很抱歉帮了你这么多忙。