【问题标题】:Unable to edit <textarea> font size in bootstrap 4无法在引导程序 4 中编辑 <textarea> 字体大小
【发布时间】:2020-07-29 09:17:58
【问题描述】:

我正在为一个 AJAX 聊天应用程序使用一些源代码,我清理它并在我在引导程序中构建的页面上使用它。但是,我想更改发布消息的文本区域的字体大小。

HTML:

<textarea class="form-control" id="chatwindow" style="min-height: 100%; font-size:30px;" cols="95" wrap="hard" readonly></textarea><br />

如果有帮助,AJAX 发布 javascript:

<script type="text/javascript">

    var nick_maxlength=10;
    var http_request=false;
    var http_request2=false;
    var intUpdate;

    /* http_request for writing */
    function ajax_request(url){http_request=false;if(window.XMLHttpRequest){http_request=new XMLHttpRequest();if(http_request.overrideMimeType){http_request.overrideMimeType('text/xml');}}else if(window.ActiveXObject){try{http_request=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{http_request=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}
    if(!http_request){alert('Giving up :( Cannot create an XMLHTTP instance');return false;}
    http_request.onreadystatechange=alertContents;http_request.open('GET',url,true);http_request.send(null);}
    function alertContents(){if(http_request.readyState==4){if(http_request.status==200){rec_response(http_request.responseText);}else{}}}

    /* http_request for reading */
    function ajax_request2(url){http_request2=false;if(window.XMLHttpRequest){http_request2=new XMLHttpRequest();if(http_request2.overrideMimeType){http_request2.overrideMimeType('text/xml');}}else if(window.ActiveXObject){try{http_request2=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{http_request2=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}
    if(!http_request2){alert('Giving up :( Cannot create an XMLHTTP instance');return false;}
    http_request2.onreadystatechange=alertContents2;http_request2.open('GET',url,true);http_request2.send(null);}
    function alertContents2(){if(http_request2.readyState==4){if(http_request2.status==200){rec_chatcontent(http_request2.responseText);}else{}}}

    /* chat stuff */
    chatmsg.focus()
    var show_newmsg_on_bottom=1;     /* set to 0 to let new msg´s appear on top */
    var waittime=3000;        /* time between chat refreshes (ms) */

    intUpdate=window.setTimeout("read_cont();", waittime);
    chatwindow.value = "loading...";

    function read_cont()         { zeit = new Date(); ms = (zeit.getHours() * 24 * 60 * 1000) + (zeit.getMinutes() * 60 * 1000) + (zeit.getSeconds() * 1000) + zeit.getMilliseconds(); ajax_request2("chat.txt?x=" + ms); }
    function display_msg(msg1)     { chatwindow.value = msg1.trim(); }
    function keyup(arg1)         { if (arg1 == 13) submit_msg(); }
    function submit_msg()         { clearTimeout(intUpdate); if (chatnick.value == "") { check = prompt("please enter username:"); if (check === null) return 0; if (check == "") check="..."; chatnick.value=check; } if (chatnick.value.length > nick_maxlength) chatnick.value=chatnick.value.substring(0,nick_maxlength); spaces=""; for(i=0;i<(nick_maxlength-chatnick.value.length);i++) spaces+=" "; v=chatwindow.value.substring(chatwindow.value.indexOf("\n")) + "\n" + chatnick.value + spaces + "| " + chatmsg.value; if (chatmsg.value != "") chatwindow.value=v.substring(1); write_msg(chatmsg.value,chatnick.value); chatmsg.value=""; intUpdate=window.setTimeout("read_cont();", waittime);}
    function write_msg(msg1,nick1)     { ajax_request("w.php?m=" + escape(msg1) + "&n=" + escape(nick1)); }
    function rec_response(str1)     { }

    function rec_chatcontent(cont1) {
        if (cont1 != "") {
            out1 = unescape(cont1);
            if (show_newmsg_on_bottom == 0) { out1 = ""; while (cont1.indexOf("\n") > -1) { out1 = cont1.substr(0, cont1.indexOf("\n")) + "\n" + out1; cont1 = cont1.substr(cont1.indexOf("\n") + 1); out1 = unescape(out1); } }
            if (chatwindow.value != out1) { display_msg(out1); }
            intUpdate=window.setTimeout("read_cont()", waittime);
        }
    }
</script>

如您所见,我已尝试在样式标签中为其分配 CSS 字体样式属性,但没有奏效。之前我只是尝试在我的 style.css 文件中设置它的样式,例如 textarea {font-size: 30px;}

我还使用了一个引导主题,它用其他东西替换了标题标签,所以我不会有任何运气用 to 标签改变大小。

请注意,更改 CSS 样式表中的字体大小会在任何地方更改它,但它看起来像的文本区域除外。有什么帮助吗?

【问题讨论】:

  • 这能回答你的问题吗? stackoverflow.com/questions/2117290/…
  • 内联样式优先于 css,除非: 1- css 上的样式具有 !Important 指令或 2 - Javascript 创建一个完全不同的 DOM。尝试使用这个:style="min-height: 100%; font-size:30px !important;"

标签: javascript html css twitter-bootstrap bootstrap-4


【解决方案1】:

某些控件默认不继承字体设置。您可以通过将其放在您的 CSS 中来覆盖它:

textarea {
   font-size: 30px!important;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-03-25
    • 1970-01-01
    • 2017-11-26
    • 2016-03-03
    • 2019-03-16
    • 1970-01-01
    • 2020-08-04
    • 2013-06-30
    相关资源
    最近更新 更多