Недавно я начал изучать код HTML и CSS, и у меня есть веб-приложение, содержащее некоторые элементы дизайна. Я не знаю, как закодировать или найти правильное направление о том, как его закодировать (я не могу ничего сопоставить с моими поисками, которые делают то, что я хочу).HTML/CSS Изменение привязки в соответствии с текстом. Длина
Я хочу, чтобы ширина анкера (img) расширялась или сокращалась в зависимости от длины символов в имени пользователя.
Я знаю, что CSS не может сделать это самостоятельно. Я считаю, что JQuery или Javascript могут справиться с этой задачей, но я не уверен, как это сделать или где начать точно.
// Мое понимание Javascript и JQuery немного ограничено. Таким образом, моим лучшим направлением было бы создание div, который соответствует длине строки из имени пользователя или функции, которая изменяет ширину привязки по отношению к строке username.length. Возможно, что-то такое:
$('anchor').ready(function() { var anchorWidth = $('username').text().length; });
Действительно ли это правильное направление? Или я в стороне от марки?
редактировать
>HTML code:
</head>
<body class="bodyHome">
<div class="settingMenu">
<div onclick="myFunction()">
<img class="fork" src="/Users/liamfox/Documents/Projects/PHM/SRC/fork.png" alt="settings and menu">
</div>
<div id="myDropdown" class="setting-content">
<ul class="ContentList">
<li><a href="#"">log out</a></li>
<li><a href="#"">USERNAME</a>
<img style="width: 150px;" src="/Users/liamfox/Documents/Projects/PHM/SRC/line0.png"></li>
</ul>
</div> <!-- END .settingsMenu -->
</div> <!-- END .setting-content -->
<div class="foot-signUp">
<div class="foot-login">
<div class="homeText" alt="username">
<a style="text-decoration: none; color: white;" href="#">add ingredient</a>
</div>
<a>
<img class="barLine2" src="/Users/liamfox/Documents/Projects/PHM/SRC/line0.png">
</a>
<!-- this script is to manipulate the width of the line anchor under the USERNAME to match the character length -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
$('imgLength').ready(function() {
var matchLength = this.text().length;
if (matchLength = this.text.length) {
this.width(text.width);
}
});
</script>
</body>
до сих пор мой сценарий выглядит, как это сейчас:
$(document).ready(function() {
$('.js-dropdown').on('click', function() {
var $underline = $('.js-underline');
var $userNameLength = $('.js-userNameLength');
console.log($underline);
console.log($userNameLength);
$underline.css('width', $userNameLength.width());
});
});
Якорь IMG может быть граница, я понял. Изображение - это просто штриховая линия, которую я сделал, у которой есть градиентный цвет, который я выбрал.
«Я вдали от знака» ... да, боюсь, по крайней мере, относительно того, как написан этот сценарий. Пожалуйста, предоставьте некоторые соответствующие html – charlietfl
_ «Я знаю, что CSS не может сделать это самостоятельно». Можете ли вы включить 'html' в Question? – guest271314
Я добавил свой код HTML, часть, о которой идет речь, -