[英]Use javascript to alter width of a div
I have some javascript code and a button which already has an event/action assigned to it, and I want to add a second event to the button. 我有一些javascript代码和一个已经为其分配了事件/操作的按钮,我想向该按钮添加第二个事件。 Currently the relevant bit of code looks like this:
当前相关的代码如下:
events: {onclick: "showTab('"+n+"')"},
how do I amend this code so that it also increases the 'wdith' property of a div with class='panel', by a fixed amount eg 50px? 我如何修改此代码,使其也将class ='panel'的div的'wdith'属性增加固定的数量,例如50px?
Thanks 谢谢
EDIT: 编辑:
I understand. 我明白。 Problem is I don't know how to change id, only classname.
问题是我不知道如何更改ID,仅更改类名。 The div is constructed in javascript using buildDomModel as follws:
div是在javascript中使用buildDomModel作为以下对象构造的:
this.buildDomModel(this.elements["page_panels"],
{ tag: "div", className: "tab_panel",
id: "tab_panel",
childs: [...]}
)
But the id doesn't get changed to 'tab_panel'. 但是ID不会更改为'tab_panel'。 HOWEVER, classname does get changed to 'tab_panel' which is why i tried to use getelementbyclass.
但是,类名确实更改为“ tab_panel”,这就是为什么我尝试使用getelementbyclass的原因。 So the div has no id and I don't know how to create one using the buildDomModel but I can give unique class.
所以div没有id,我不知道如何使用buildDomModel创建一个id,但是我可以提供唯一的类。 I have put the code in original post too.
我也将代码放在原始帖子中。
This:
这个:
events: {onclick: "showTab('"+n+"'); $('div.panel').width('50px');"},
Or you might want to add below line to
showTab
function.
或者,您可能想在
showTab
函数中添加以下行。
$('div.panel').width('50px');
Update: 更新:
Or you can do with vanilla javascript: 或者您可以使用香草javascript:
function setWidth()
{
var div = document.getElementById('div_id');
div.setAttribute('width', '50px');
}
Or if you want to apply the width to just one specific div, give that div an id and use this function instead: 或者,如果您要将宽度仅应用于一个特定的div,请为该div提供一个ID,然后使用此函数:
events: {onclick: "showTab('"+n+"'); setWidth();"},
And later use it like this: 然后像这样使用它:
setWidth();
Or you might want to add below line to showTab
function. 或者,您可能想在
showTab
函数中添加以下行。
setWidth();
Update 2: 更新2:
Ok modify the function like this: 确定修改函数,如下所示:
function setWidth(){
jQuery('.tab_panel').each(function(){
jQuery(this).attr('style', 'width:' + (jQuery(this).width() + 50));
});
}
Note that with jQuery it should be this code in all: 请注意,使用jQuery时,应全部使用以下代码:
function setWidth(){ jQuery('.tab_panel').each(function(){ jQuery(this).attr('style', 'width:' + (jQuery(this).width() + 50)); }); }
instead of the function you can use this line of JQuery code: 您可以使用以下JQuery代码行代替该函数:
$('div.tab_panel').attr('style',"width:100px");
any way if you dont want it to be JQuery then this function should work : 无论如何,如果您不希望它成为JQuery,则此功能应该可以工作:
function setWidth() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
// check if this div has panel class
if (divs[i].getAttribute('class') === 'tab_panel') {
// set the style now
divs[i].setAttribute('style', 'width:100px');
}
}
}
putting width attribute to div wouldnt work, you need to set its style, 将width属性设置为div不会起作用,您需要设置其样式,
so i expect any of the code i provided to work. 所以我希望我提供的任何代码都能正常工作。
oh no the one i sent early just set width to a new value this one should fix your problem : 哦,没有,我早发的只是将width设置为一个新值,这个应该可以解决您的问题:
var x = $('div.tab_panel')[0].style.width.replace("px", "");
x = x + 50;
$('div.tab_panel').attr('style', "width:" + x + "px");
ok here is a non JQuery Version : 好的,这是一个非JQuery版本:
function setWidth() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute('class') === 'tab_panel') {
var x = divs[i].style.width.replace("px", "");
x = x + 50;
divs[i].setAttribute('style', 'width:' + x + 'px');
}
}
ok here it is : 好的,这里是:
JQuery: jQuery的:
function Button1_onclick() {
var x = $('div.tab_panel')[0].clientWidth;
x = x + 50;
$('div.tab_panel').attr('style', "width:" + x + "px");
}
non JQuert: 非JQuert:
function setWidth() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute('class') === 'tab_panel') {
var x = divs[i].offsetWidth;
x = x + 50;
divs[i].setAttribute('style', 'width:' + x + 'px');
}
}
}
this should work 这应该工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.