css绑定html值 [英] css bind with html value
问题描述
我遵循本教程：http：//tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/
一切正常，直到我想要更改封面，他们使用此代码分配封面照片，如果它是第一页。
HTML
< script id = pageTmpl type = text / x-jquery-tmpl >
< div class = $ {theClass} style = $ {theStyle} runat = server id = divContent >
< div class = front >
< div class = 外部 >
< div class = 已删除 style = $ {theContentStyleFront} >
< div class = inner > {{html theContentFront}} < / div >
< / div >
< / div >
< / div >
< div class = 返回 >
< div < span class =code-attribute> class = 外 >
< div class = 已删除 样式 = $ {theContentStyleBack} >
< div class = inner > {{html theContentBack}} < / div >
< / div >
< / div >
< / div >
< / div >
< / script >
Javascript
for （ var i = 0 ; i< = 此 .pagesCount - 2 ; ++ i）{
var $ page = this 。$ pages.eq（i） ，
pageData = {
theClass：' page'，
theContentFront：$ page.html（），
theContentBack :( i！== this .pagesCount）？ this 。$ pages.eq（i + 1 ）。html（）：' '，
theStyle：' z-index：' +（ this .pagesCount - i）+ ' ; left：' +（ this .windowProp.width / 2 ）+ ' px;'，
theContentStyleFront：< span class =code-string>' width：' + this .windowProp。 width + ' px;'，
theContentStyleBack：' wid th：' + this .windowProp.width + ' px;'
};
if （i === 0 ）{
pageData.theClass + = ' cover';
}
else {
pageData.theContentStyleFront + = ' < span class =code-string> left： - ' +（ this .windowProp.width / 2 ）+ ' px';
if （i === this .pagesCount - 2 ）{
pageData.theClass + = ' cover-back';
}
}
$（' ＃pageTmpl'）。 tmpl（pageData）.appendTo（ this 。$ el）;
}
CSS
< pre lang =CSS>。 page 。 cover 。前。内容 {
背景 ： #ddd url（http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg）无重复中心;
background-size ： 封面;
}
现在我有2个不同的aspx，有2个不同的封面，因此上面的代码不适合我。我不想创建另一个js或css文件只是因为我想要不同的封面照片。所以我在想，有没有可能我用html控件设置css值。例如：
。 page 。 cover 。 front 。 content {
背景 ： #ddd url（+ lbl1.Text +）no-repeat中心;
background-size ： 封面;
}
< asp：Label Text =http： // txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpgrunat =serverID = lbl1/>
i尝试使用javascript来改变css，但似乎可以找不到类名，我收到了错误信息：无法读取专业版perty'style'of undefined
var abc = document .getElementsByClassName（ page cover）[< span class =code-digit> 0 ];
abc.style.background = #ddd url（http://txm.com.au/wp -content / uploads / 2013/10 / TXM_Image_3.jpg）无重复中心;
i还尝试从代码behine更改css
string strClass = divContent.Attributes [ 类];
if （strClass == page cover ）
{
// 更改css
}
但是strClass返回$ {theClass}而不是page cover
{theClass} style =
{theStyle} runat = server id = divContent >
< div class = front >
< div class = 外部 >
< div class = 已删除 样式 =
{theContentStyleFront} >
< div class = inner > {{html theContentFront}} < / div >
< / div >
< / div >
< / div >
< div class = 返回 >
< < span class =code-leadattribute> div class = 外部 >
< div class = 已删除 style =
i follow this tutorial: http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/
everything work fine until i want to change the cover, they using this code assign the cover photo if it's first page.
HTML
<script id="pageTmpl" type="text/x-jquery-tmpl">
<div class="${theClass}" style="${theStyle}" runat="server" id="divContent">
<div class="front">
<div class="outer">
<div class="removed" style="${theContentStyleFront}">
<div class="inner">{{html theContentFront}}</div>
</div>
</div>
</div>
<div class="back">
<div class="outer">
<div class="removed" style="${theContentStyleBack}">
<div class="inner">{{html theContentBack}}</div>
</div>
</div>
</div>
</div>
</script>
Javascript
for( var i = 0; i <= this.pagesCount - 2; ++i ) {
var $page = this.$pages.eq( i ),
pageData = {
theClass : 'page',
theContentFront : $page.html(),
theContentBack : ( i !== this.pagesCount ) ? this.$pages.eq( i + 1 ).html() : '',
theStyle : 'z-index: ' + ( this.pagesCount - i ) + ';left: ' + ( this.windowProp.width / 2 ) + 'px;',
theContentStyleFront : 'width:' + this.windowProp.width + 'px;',
theContentStyleBack : 'width:' + this.windowProp.width + 'px;'
};
if( i === 0 ) {
pageData.theClass += ' cover';
}
else {
pageData.theContentStyleFront += 'left:-' + ( this.windowProp.width / 2 ) + 'px';
if( i === this.pagesCount - 2 ) {
pageData.theClass += ' cover-back';
}
}
$( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
}
CSS
.page.cover .front .content {
background: #ddd url(http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg) no-repeat center center;
background-size: cover;
}
now i have 2 different aspx with 2 different cover pages, hence the code above is not working for me. i don't wan to create another js or css file just because i want the different cover photo. so i was thinking, is there any possible that i set the css value with html control. eg:
.page.cover .front .content {
background: #ddd url(" + lbl1.Text + ") no-repeat center center;
background-size: cover;
}
<asp:Label Text="http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg" runat="server" ID="lbl1" />
i tried using the javascript to change the css, but seems like it can't find the class name, i got the error message: Cannot read property 'style' of undefined
var abc = document.getElementsByClassName("page cover")[0];
abc.style.background = "#ddd url(http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg) no-repeat center center";
i also tried to change the css from code behine
string strClass = divContent.Attributes["class"];
if (strClass == "page cover")
{
// change css
}
but the strClass return "${theClass}" instead of "page cover"
{theClass}" style="
{theStyle}" runat="server" id="divContent"> <div class="front"> <div class="outer"> <div class="removed" style="
{theContentStyleFront}"> <div class="inner">{{html theContentFront}}</div> </div> </div> </div> <div class="back"> <div class="outer"> <div class="removed" style="
这篇关于css绑定html值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
